设计

外边框，不在元素触发区的计算范围内，触发效果类似 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;

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

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

不要在移动设备上，为可点击的元素展示点击之后的「阴影」效果

-webkit-tap-highlight-color: transparent;

等比设置一个元素的宽高，拿来设置 iframe 标签的效果就蛮合适的。

aspect-ratio: 16 / 9;

此前常用做法都是设置一个容器包裹，子元素再设置「相对定位」的方式实现。

.wrapper{
  height: 0;
  display: block;
  position: relative;
  padding-bottom: 56%;
}

.wrapper iframe{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  position: absolute;
}

文字与排版

首行缩进，单位自拟，这里是 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; // 全部大写

不要在 Safari 下出现奇奇怪怪的字体缩放

-webkit-text-size-adjust: 100%;

单行文本超出显示省略效果，配合 overflow text-overflow white-space 三个属性一起使用

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本超出显示省略效果，在单行的基础上增加 -webkit-line-clamp 属性

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

交互与视图

可以让一个元素内的文字不可被用户选中，防止 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 属性还会再逐渐完善...

保罗的小宇宙

CSS 那些不太常用的属性

设计

文字与排版

交互与视图

Paul

没有评论