这篇文章上次修改于 685 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
基本上是写的较少,容易被忘记,但却有用的 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;
可将一个存放 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 属性还会再逐渐完善...
没有评论