灵活运用CSS开发技巧(66个实用技巧，值得收藏)

前言

灵活运用CSS开发技巧 请戳这里，持续更新
灵活运用JS开发技巧 请戳这里，持续更新

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。

每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧。

作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。

代码只作演示用途，不会详细说明语法
部分技巧示例代码过长，使用CodePen进行保存，点击在线演示即可查看
兼容项点击链接即可查看当前属性的浏览器兼容数据，自行根据项目兼容需求考虑是否使用
以下代码全部基于CSS进行书写，没有任何JS代码，没有特殊说明的情况下所有属性和方法都是CSS类型
一部分技巧是自己探讨出来的，另一部分技巧是参考各位前端大神们的，都是一个互相学习的工程，大家一起进步

Layout Skill

使用vw定制rem自适应布局

要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
场景：rem页面布局(不兼容低版本移动端系统)
兼容：vw、calc()

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}
复制代码

使用:nth-child()选择指定元素

要点：通过:nth-child()筛选指定的元素设置样式
场景：表格着色、边界元素排版(首元素、尾元素、左右两边元素)
兼容：:nth-child()
代码：在线演示

使用writing-mode排版竖文

要点：通过writing-mode调整文本排版方向
场景：竖行文字、文言文、诗词
兼容：writing-mode
代码：在线演示

使用text-align-last对齐两端文本

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

使用:not()去除无用属性

要点：通过:not()排除指定元素不使用设置样式
场景：符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)
兼容：:not()
代码：在线演示

使用object-fit规定图像尺寸

要点：通过object-fit使图像脱离background-size的约束，使用来标记图像背景尺寸
场景：图片尺寸自适应
兼容：object-fit
代码：在线演示

使用overflow-x排版横向列表

要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看
场景：横向滚动列表、元素过多但位置有限的导航栏
兼容：overflow-x
代码：在线演示

使用text-overflow控制文本溢出

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

使用transform描绘1px边框

要点：分辨率比较低的屏幕下显示1px的边框会显得模糊，通过::before或::after和transform模拟细腻的1px边框
场景：容器1px边框
兼容：transform
代码：在线演示

使用transform翻转内容

要点：通过transform:scale3d()对内容进行翻转(水平翻转、垂直翻转、倒序翻转)
场景：内容翻转
兼容：transform
代码：在线演示

使用letter-spacing排版倒序文本

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

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

要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐
场景：右侧带图标的导航栏
兼容：margin
代码：在线演示

Behavior Skill

使用overflow-scrolling支持弹性滚动

要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度
场景：iOS页面滚动
兼容：iOS自带-webkit-overflow-scrolling

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}
复制代码

使用transform启动GPU硬件加速

要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题
场景：动画元素(绝对定位、同级中超过6个以上使用动画)
兼容：transform

.elem {
    transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}
复制代码

使用attr()抓取data-*

要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上
场景：提示框
兼容：data-*、attr()
代码：在线演示

使用:valid和:invalid校验表单

要点：使用伪类:valid和:invalid配合pattern校验表单输入的内容
场景：表单校验
兼容：pattern、:valid、:invalid
代码：在线演示

使用pointer-events禁用事件触发

要点：通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于
场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)
兼容：pointer-events
代码：在线演示

使用+或~美化选项框

要点：使用+或~配合for绑定radio或checkbox的选择行为
场景：选项框美化、选中项增加选中样式
兼容：+、~
代码：在线演示

使用:focus-within分发冒泡响应

要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式
场景：登录注册弹框、表单校验、离屏导航、导航切换
兼容：:focus-within、:placeholder-shown
代码：在线演示

使用:hover描绘鼠标跟随

要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹
场景：鼠标跟随轨迹、水波纹、怪圈
兼容：:hover
代码：在线演示

使用max-height切换自动高度

要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的过渡切换
场景：隐藏式子导航栏、悬浮式折叠面板
兼容：max-height
代码：在线演示

使用transform模拟视差滚动

要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果
场景：页面滚动、视差滚动文字阴影、视差滚动文字虚影
兼容：background-attachment、transform
代码：在线演示

使用animation-delay保留动画起始帧

要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行
场景：开场动画
兼容：transform、animation
代码：在线演示

使用resize拉伸分栏

要点：通过resize设置横向自由拉伸来调整目标元素的宽度
场景：富文本编辑器、分栏阅读
兼容：resize
代码：在线演示

Color Skill

使用color改变边框颜色

要点：border没有定义border-color时，设置color后，border-color会被定义成color
场景：边框颜色与文字颜色相同
兼容：color

.elem {
    border: 1px solid;
    color: #f66;
}
复制代码

使用filter开启悼念模式

要点：通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们
场景：网站悼念
兼容：filter
代码：在线演示

使用::selection改变文本选择颜色

要点：通过::selection根据主题颜色自定义文本选择颜色
场景：主题化
兼容：::selection
代码：在线演示

使用linear-gradient控制背景渐变

要点：通过linear-gradient设置背景渐变色并放大背景尺寸，添加背景移动效果
场景：主题化、彩虹背景墙
兼容：gradient、animation
代码：在线演示

使用linear-gradient控制文本渐变

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

使用caret-color改变光标颜色

要点：通过caret-color根据主题颜色自定义光标颜色
场景：主题化
兼容：caret-color
代码：在线演示

使用:scrollbar改变滚动条样式

要点：通过scrollbar的scrollbar-track和scrollbar-thumb等属性来自定义滚动条样式
场景：主题化、页面滚动
兼容：:scrollbar
代码：在线演示

使用filter模拟Instagram滤镜

要点：通过filter的滤镜组合起来模拟Instagram滤镜
场景：图片滤镜
兼容：filter
代码：在线演示、css-gram

" alt="在线演示" data-src="https://user-gold-cdn.xitu.io/2019/8/22/16cb886a0731bd93?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1280" data-height="493">

Figure Skill

使用div描绘各种图形

要点：
配合其伪元素(::before、::after)通过clip、transform等方式绘制各种图形
场景：各种图形容器
兼容：clip、transform
代码：在线演示

使用mask雕刻镂空背景

要点：通过mask为图像背景生成蒙层提供遮罩效果
场景：高斯模糊蒙层、票劵(电影票、购物卡)、遮罩动画
兼容：mask、perspective、transform-style、animation
代码：在线演示

使用linear-gradient描绘波浪线

要点：通过linear-gradient绘制波浪线
场景：文字强化显示、文字下划线、内容分割线
兼容：gradient
代码：在线演示

使用linear-gradient描绘彩带

要点：通过linear-gradient绘制间断颜色的彩带
场景：主题化
兼容：gradient
代码：在线演示

使用conic-gradient描绘饼图

要点：通过conic-gradient绘制多种色彩的饼图
场景：项占比饼图
兼容：gradient
代码：在线演示

" alt="在线演示" data-src="https://user-gold-cdn.xitu.io/2019/8/19/16ca8eadca79493b?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="323" data-height="320">

使用linear-gradient描绘方格背景

要点：使用linear-gradient绘制间断颜色的彩带进行交互生成方格
场景：格子背景、占位图
兼容：gradient
代码：在线演示

使用box-shadow描绘单侧投影

要点：通过box-shadow生成投影，且模糊半径和负的扩张半径一致，使投影偏向一侧
场景：容器投影、背景补间动画1、背景补间动画2、立体投影、文字立体投影、文字渐变立体投影、长投影、霓虹灯、灯光阴影
兼容：box-shadow、filter、text-shadow
代码：在线演示