1. 每个单词的首字母大写
- 要点:通过
text-transform
调正文字 - 场景:每个单词的首字母大写,摆脱一味
JS
的控制 - 兼容:all:text-transform
- 代码:在线演示

2.使用input:checked单选高亮
- 要点:通过
input:checked
单选高亮 - 场景:单选高亮(之前做 pc 端的客户画像需求时,遇到需要左右两边等到的需求(左边块的高度会随着内容变化)),摆脱一味
JS
的控制 - 兼容:text-transform
- 代码:在线演示

3.使用vw定制rem自适应布局
4.使用writing-mode排版竖文
- 要点:通过
writing-mode
调整文本排版方向 - 场景:竖行文字、文言文、诗词
- 兼容:writing-mode
- 代码:在线演示

5.使用text-align-last对齐两端文本
- 要点:通过
text-align-last:justify
设置文本两端对齐 - 场景:未知字数中文对齐
- 兼容:text-align-last
- 代码:在线演示

6.使用object-fit规定图像尺寸
- 要点:通过
object-fit
使图像脱离background-size
的约束,使用<img>
来标记图像背景尺寸 - 场景:图片尺寸自适应
- 兼容:object-fit
- 代码:在线演示

7.使用text-overflow控制文本溢出
- 要点:通过
text-overflow:ellipsis
对溢出的文本在末端添加...
- 场景:单行文字溢出、多行文字溢出
- 兼容:text-overflow、line-clamp、box-orient
- 代码:在线演示

8.使用letter-spacing排版倒序文本
- 要点:通过
letter-spacing
设置负值字体间距将文本倒序 - 场景:文言文、诗词
- 兼容:letter-spacing
- 代码:在线演示

9.使用margin-left排版左重右轻列表

10.使用overflow-scrolling支持弹性滚动
- 要点:iOS页面非
body
元素的滚动操作会非常卡(Android
不会出现此情况),通过overflow-scrolling:touch
调用Safari
原生滚动来支持弹性滚动,增加页面滚动的流畅度 - 场景:iOS页面滚动
- 兼容:iOS自带
-webkit-overflow-scrolling
body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}
11.使用transform启动GPU硬件加速
- 要点:有时执行动画可能会导致页面卡顿,可在特定元素中使用硬件加速来避免这个问题
- 场景:动画元素(绝对定位、同级中超过6个以上使用动画)
- 兼容:transform
.element {
transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}
12.使用pointer-events禁用事件触发
- 要点:通过
pointer-events:none
禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等),相当于<button>
的disabled
- 场景:限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)
- 兼容:pointer-events
- 代码:在线演示
13.使用:valid和:invalid校验表单
14.使用:focus-within分发冒泡响应
- 要点:表单控件触发
focus
和blur
事件后往父元素进行冒泡,在父元素上通过:focus-within
捕获该冒泡事件来设置样式 - 场景:登录注册弹框、表单校验、离屏导航、导航切换
- 兼容::focus-within、:placeholder-shown
- 代码:在线演示
15.使用color改变边框颜色
- 要点:
border
没有定义border-color
时,设置color
后,border-color
会被定义成color
- 场景:边框颜色与文字颜色相同
- 兼容:color
.elem {
border: 1px solid;
color: #f66;
}
16.使用filter开启悼念模式
- 要点:通过
filter:grayscale()
设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们 - 场景:网站悼念
- 兼容:filter
html {
filter: grayscale(100%);
}

17.使用::selection改变文本选择颜色
- 要点:通过
::selection
根据主题颜色自定义文本选择颜色 - 场景:主题化
- 兼容:::selection
- 代码:在线演示

18.使用linear-gradient控制文本渐变
- 要点:通过
linear-gradient
设置背景渐变色,配合background-clip:text
对背景进行文本裁剪,添加滤镜动画 - 场景:主题化、特色标题
- 兼容:gradient、background-clip、filter、animation、text-fill-color
- 代码:在线演示

19.使用transform模拟视差滚动
- 要点:通过
background-attachment:fixed
或transform
让多层背景以不同的速度移动,形成立体的运动效果 - 场景:页面滚动、视差滚动文字阴影、视差滚动文字虚影
- 兼容:background-attachment、transform
- 代码:在线演示
20.使用linear-gradient控制背景渐变

21.使用animation-delay保留动画起始帧
- 要点:通过
transform-delay
或animation-delay
设置负值时延保留动画起始帧,让动画进入页面不用等待即可运行 - 场景:开场动画
- 兼容:transform、animation
- 代码:在线演示
22.使用caret-color改变光标颜色
- 要点:通过
caret-color
根据主题颜色自定义光标颜色 - 场景:主题化
- 兼容:caret-color
- 代码:在线演示

23.使用box-shadow裁剪图像
- 要点:通过
box-shadow
模拟蒙层实现中间镂空 - 场景:图片裁剪、新手引导、背景镂空、投射定位
- 兼容:box-shadow
- 代码:在线演示
24.滚动指示器
25.换色器
- 要点:通过拾色器改变图像色相的换色器
- 场景:图片色彩变换
- 兼容:mix-blend-mode
- 代码:在线演示
26.倒影加载条
- 要点:带有渐变倒影的加载条
- 场景:加载提示
- 兼容:box-reflect、animation
- 代码:在线演示

27.动态边框

28.立体按钮
- 要点:点击呈现按下状态的按钮
- 场景:按钮点击
- 兼容:box-shadow
- 代码:在线演示

29.自适应相册
- 要点:自适应照片数量的相册
- 场景:九宫格相册、微信相册、图集
- 兼容::only-child、:first-child、:nth-child()、:nth-last-child()、~
- 代码:在线演示
- 代码:在线演示
网友评论