【很多时候跟着书和系统的视频网站学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习过程中会遇到很多问题，Web学习交流群可以帮到你】点击进入 一起学习，一起交流，准备了基础，进阶学习规划与资料，每天也会准时讲一些项目实战案例。
灵活运用CSS开发技巧(第三章)
灵活运用CSS开发技巧(目 录)
使用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
代码：在线演示
使用: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
代码：在线演示
Figure Skill
使用div描绘各种图形
要点：
场景：各种图形容器
兼容：clip、transform
代码：在线演示
使用mask雕刻镂空背景
要点：通过mask为图像背景生成蒙层提供遮罩效果
场景：高斯模糊蒙层、 href="https://codepen.io/HelKyle/pen/XxZPmY/">票劵(电影票、购物卡)、遮罩动画
兼容：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
代码：在线演示
更多相关Web前端，CSS，HTML，JS相关资料加群点击进入。