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

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

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

目录

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

备注

Layout Skill

使用vw定制rem自适应布局

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

在线演示

使用writing-mode排版竖文

在线演示

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

在线演示

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

在线演示

使用object-fit规定图像尺寸

在线演示

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

使用overflow-x排版横向列表

在线演示

使用text-overflow控制文本溢出

在线演示

使用transform描绘1px边框

在线演示

使用transform翻转内容

在线演示

使用letter-spacing排版倒序文本

在线演示

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

Behavior Skill

使用overflow-scrolling支持弹性滚动

使用transform启动GPU硬件加速

使用attr()抓取data-*

在线演示

使用:valid和:invalid校验表单

在线演示

使用pointer-events禁用事件触发

在线演示

使用+或~美化选项框

在线演示

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

在线演示

使用:hover描绘鼠标跟随

在线演示

使用max-height切换自动高度

在线演示

使用transform模拟视差滚动

在线演示

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

在线演示

使用resize拉伸分栏

在线演示

Color Skill

使用color改变边框颜色

在线演示

使用filter开启悼念模式

在线演示

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

在线演示

使用linear-gradient控制背景渐变

在线演示

使用linear-gradient控制文本渐变

在线演示

使用caret-color改变光标颜色

在线演示

使用:scrollbar改变滚动条样式

在线演示

使用filter模拟Instagram滤镜

在线演示

Figure Skill

使用div描绘各种图形

使用mask雕刻镂空背景

在线演示

使用linear-gradient描绘波浪线

在线演示

使用linear-gradient描绘彩带

在线演示

使用conic-gradient描绘饼图

在线演示

使用linear-gradient描绘方格背景

在线演示

使用box-shadow描绘单侧投影

在线演示

使用filter描绘头像彩色阴影

在线演示

使用box-shadow裁剪图像

在线演示

使用outline描绘内边框

在线演示

Component Skill

迭代计数器

在线演示

下划线跟随导航栏

在线演示

气泡背景墙

在线演示

滚动指示器

在线演示

故障文本

在线演示

换色器

在线演示

悬浮状态球

在线演示

粘粘球

在线演示

商城票券

在线演示

倒影加载条

在线演示

三维立方体

在线演示

动态边框

在线演示

标签页

在线演示

标签导航栏

在线演示

折叠面板

在线演示

星级评分

在线演示

加载指示器

在线演示

自适应相册

在线演示

圆角进度条

在线演示

螺纹进度条

在线演示

立体按钮

在线演示

混沌加载圈

在线演示

蛇形边框

在线演示

自动打字