作者：前端宇宙
作甚技巧，意指表现在文学、工艺、体育等方面的奥妙技能。代码作为一门当代高等工艺，推动着人类科学技能的发展，同时犹如笔墨一样承托着人类文化的进步。
每写好一篇文章，都会利用大量的写作技巧。陪衬、渲染、悬念、铺垫、照料、伏笔、遐想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托比拟、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒怀等，这些该当都是我们从小到大写文章而打仗到的写作技巧。
作为程序猿的我们，写代码同样也须要大量的写作技巧。一份良好的代码能让人线人一新，让人随意马虎理解，让人舒畅自然，同时也让自己造诣感满满(哈哈，这个才是重点)。因此，我整理下三年来自己利用到的一些CSS开拓技巧，希望能让你写出线人一新、随意马虎理解、舒畅自然的代码。
目录
既然写文章有这么多的写作技巧，那么我也须要对CSS开拓技巧整理一下，起个易记的名字。
√Layout Skill：布局技巧√Behavior Skill：行为技巧√Color Skill：色彩技巧√Figure Skill：图形技巧√Component Skill：组件技巧备注
代码只作演示用场，不会详细解释语法部分技巧示例代码过长，利用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代码：在线演示在线演示
我自己是一名从事了多年开拓的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适宜2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
利用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-scrollingbody { -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禁用事宜触发(默认事宜、冒泡事宜、鼠标事宜、键盘事宜等)，相称于的disabled场景：限时点击按钮(发送验证码倒计时)、事宜冒泡禁用(多个元素重叠且自带事宜、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在线演示
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代码：在线演示在线演示
利用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代码：在线演示在线演示
Component Skill
迭代计数器
要点：累加选项单位的计数器场景：章节目录、选项计数器、加法计数器兼容：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代码：在线演示
