CSS 那些不太常用的属性

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

outline

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

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

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

object-fit: cover;

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

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

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

文字与排版

text-indent: 1em;

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

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; // 全部大写

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

交互与视图

user-select: none;

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

pointer-events: none;

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

visibility: hidden;

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

scroll-margin-top: 2em;

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

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

• 上一篇: 奇怪的知识增加了
• 下一篇: 看完啦 (つд⊂)