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

jiezi

5 年前

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

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

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

既然写文章有这么多的写作技巧，那么我也需要对 CSS 开发技巧 整理一下，起个易记的名字。

Layout Skill：布局技巧
Behavior Skill：行为技巧
Color Skill：色彩技巧
Figure Skill：图形技巧
Component Skill：组件技巧

备注

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

使用 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 的约束，使用 <img> 来标记图像背景尺寸
场景：图片尺寸自适应
兼容：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
代码：在线演示

使用 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 校验表单

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

使用 pointer-events 禁用事件触发

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

使用 + 或~ 美化选项框

要点：<label>使用 + 或~配合 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 改变边框颜色

要点：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

使用 div 描绘各种图形

要点：<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
代码：在线演示

使用 linear-gradient 描绘方格背景

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

使用 box-shadow 描绘单侧投影

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

使用 filter 描绘头像彩色阴影

要点：通过 filter:blur() brightness() opacity() 模拟阴影效果
场景：头像阴影
兼容：filter
代码：在线演示

使用 box-shadow 裁剪图像

要点：通过 box-shadow 模拟蒙层实现中间镂空
场景：图片裁剪 、 新手引导 、 背景镂空 、 投射定位
兼容：box-shadow
代码：在线演示

使用 outline 描绘内边框

要点：通过 outline 设置轮廓进行描边，可设置 outline-offset 设置内描边
场景：内描边 、 外描边
兼容：outline
代码：在线演示

迭代计数器

要点：累加选项单位的计数器
场景：章节目录 、 选项计数器 、 加法计数器
兼容：counters
代码：在线演示

下划线跟随导航栏

要点：下划线跟随鼠标移动的导航栏
场景：动态导航栏
兼容：+
代码：在线演示

气泡背景墙

要点：不间断冒出气泡的背景墙
场景：动态背景
兼容：animation
代码：在线演示

滚动指示器

要点：提示滚动进度的指示器
场景：阅读进度
兼容：calc())、gradient
代码：在线演示

故障文本

要点：显示器故障形式的文本
场景：错误提示
兼容：data-*、attr())、animation
代码：在线演示

换色器

要点：通过拾色器改变图像色相的换色器
场景：图片色彩变换
兼容：mix-blend-mode
代码：在线演示

状态悬浮球

要点：展示当前状态的悬浮球
场景：状态动态显示 、 波浪动画
兼容：gradient、animation
代码：在线演示

粘粘球

要点：相交粘粘效果的双球回弹运动
场景：粘粘动画
兼容：filter、animation
代码：在线演示

商城票券

要点：边缘带孔和中间折痕的票劵
场景：电影票 、 代金券 、 消费卡
兼容：gradient
代码：在线演示

倒影加载条

要点：带有渐变倒影的加载条
场景：加载提示
兼容：box-reflect、animation
代码：在线演示

三维立方体

要点：三维建模的立方体
场景：三维建模
兼容：transform、perspective、transform-style、animation
代码：在线演示

动态边框

要点：鼠标悬浮时动态渐变显示的边框
场景：悬浮按钮 、 边框动画
兼容：gradient
代码：在线演示

标签页

要点：可切换内容的标签页
场景：内容切换
兼容：scroll-behavior
代码：在线演示

标签导航栏

要点：可切换内容的导航栏
场景：页面切换
兼容：~
代码：在线演示

折叠面板

要点：可折叠内容的面板
场景：隐藏式子导航栏
兼容：~
代码：在线演示

星级评分

要点：点击星星进行评分的按钮
场景：评分
兼容：~
代码：在线演示

加载指示器

要点：变换 ... 长度的加载提示
场景：加载提示
兼容：animation
代码：在线演示

自适应相册

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

圆角进度条

要点：单一颜色的圆角进度条
场景：进度条
兼容：gradient
代码：在线演示

螺纹进度条

要点：渐变螺纹的进度条
场景：进度条 、 加载动画
兼容：gradient、animation
代码：在线演示

立体按钮

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

混沌加载圈

要点：带混沌虚影的加载圈
场景：加载提示
兼容：filter、animation
代码：在线演示

蛇形边框

要点：蛇形运动的边框
场景：蛇形动画
兼容：clip、animation
代码：在线演示

自动打字

要点：逐个字符自动打印出来的文字
场景：代码演示 、 文字输入动画
兼容：ch、animation
代码：在线演示

写到最后总结得差不多了，后续如果我想起还有哪些 CSS 开发技巧 遗漏的，会继续在这篇文章上补全，同时也希望各位朋友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的 点个赞 或收个藏，保证你在开发时用得上。

最后送大家一个键盘！

(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()

《灵活运用》系列

灵活运用 JS 开发技巧强烈推荐收藏????

《必备工具》系列

Cmder&iTerm 美化你的终端强烈推荐收藏????

《随笔》系列

前端性能优化指南强烈推荐收藏????
详细判断浏览器运行环境强烈推荐收藏????
H5 与 App 的通讯方式强烈推荐收藏????
1.5 万字概括 ES6 全部特性强烈推荐收藏????

关注公众号Uzero，更多前端小干货等着你喔！我是JowayYoung，喜欢分享前端技术和生活纪事，学习与生活不落下，每天进步一点点，与大家相伴成长

前言

目录

Layout Skill