基本上是写的较少,容易被忘记,但却有用的 CSS 属性,整理出来做个备忘吧!

设计

外边框,不在元素触发区的计算范围内,触发效果类似 box-shadow,长得像 border。在 Chrome 下默认 button 按钮的 :active 就有这个属性

outline: 2px #3498db solid;

增加文字描边,Chrome 浏览器支持最好,适合背景复杂,文字不突出的场景下增加白色描边,配合 text-shadow 一起使用效果更好。

-webkit-text-stroke: 2px #555;
text-stroke: 2px #555;

img 图片等比缩放,不会变形,类似 background-size 属性设置背景实现的效果。

object-fit: cover;

可将一个存放 adiv 元素变成一个 ul 列表的效果,指定项目符号的样式。

display: list-item;
list-style-type: circle;

文字与排版

首行缩进,单位自拟,这里是 1 个字号,如果对一个放置在 p 元素的 img 使用,会造成图片也出现缩进导致图片溢出的情况,谨慎直接使用。

text-indent: 1em;

强制让某个块的长文字被换行(尤其是链接,但建议不要给文章直接设置)

word-break: break-word;

文字与文字之间的间距,可以提升文章的阅读体验

letter-spacing: .25em;

文本垂直从左到右/从右到左对齐

writing-mode: vertical-lr;
writing-mode: vertical-rl;

英文单词的显示效果,尤其是大写非常适用于大标题

text-transform: capitalize; // 首字母大写,JS 操作麻烦就用它
text-transform: lowercase; // 全部小写
text-transform: uppercase; // 全部大写

交互与视图

可以让一个元素内的文字不可被用户选中,防止 UI 部分需要交互的地方双击出现文字块选的效果。

user-select: none;

user-select 效果类似,这个属性将会使得元素完全无法被触发,包括 JS 里面的 onClick 等事件。

pointer-events: none;

使得元素不可见,一般配合 pointer-events + opacity 等属性一起使用,加上 transition 属性之后可以做到任意动画过渡出现的效果,无需 JS。

visibility: hidden;

使用 a 元素的锚链接点击跳转到此元素的时候,将会距离页面顶部保留 2 字符。

scroll-margin-top: 2em;

更多的 CSS 属性还会再逐渐完善...