网页性能优化的一个重要途径就是减少不必要的网络请求。传统的做法是用图片来表现图形和图标，每一个文件都会产生一个独立的HTTP请求，在弱网环境下会造成明显的加载延迟。CSS3中的border-radius、box-shadow、transform、clip-path以及渐变属性可以不用任何图片就可以画出复杂的视觉效果，完全摆脱了对图片文件的依赖。
CSS3的基本用法：由简单的图形到复杂的结构
使用border-radius和background渐变可以很快地创建出圆形、圆角矩形以及渐变色背景的效果。利用::before和::after伪元素来扩展元素的尺寸，在不添加任何DOM节点的情况下叠加多层视觉效果。比如一个带内阴影的圆形按钮只需要设置border-radius: 50%和box-shadow: inset就可以完成，不需要导出PNG或者SVG文件。
clip-path可以设置多边形、圆形、椭圆形等多种形状来裁剪元素，可以直接指定元素的显示范围。画三角形、梯形、五角星等复杂图形的时候不需要用透明边框的方法了，代码更加简洁易读。
复杂的图标制作方法：线性组合和渐变叠加
复杂的图标可以分解成几个基本的几何图形来组合而成，“设置齿轮”的图标就是这样的例子，外圈用border-radius来做圆角处理，里面的牙齿部分则用linear-gradient和repeating-conic-gradient一起制作出锥形渐变效果，再加上mask属性进行切割形成齿状结构，整个过程中不需要用到任何图片文件，在Retina屏幕上也能保持清晰。
使用mask-image和CSS渐变可以制作出半透明的遮罩效果，使图标出现镂空、渐变色等视觉效果。相比于SVG Sprite的方式，CSS3方式省去了文件解析以及DOM插入的过程，渲染路径也更短一些。
性能收益：衡量减少HTTP请求的效果
以有20个图标的导航栏为例：传统的做法是加载20张单独的图片或者一张雪碧图（仍然需要一次请求和定位计算），而用CSS3来画的话，则直接把图标样式内联到CSS文件中，随着样式表一起被加载出来。这样总的请求次数就减少了20次，在HTTP/1.1的环境下可以节省几百毫秒的时间。
用CSS3来绘制图形是基于矢量描述的，可以无限放大而不失真，并且能够很好地适应各种屏幕尺寸，不需要为不同的设备准备多组图像文件。
实用技巧与避坑指南
-
优先使用伪元素：将装饰性图形挂载到
::before/::after上，保持DOM结构扁平化。
-
避免过度绘制：复杂阴影与模糊效果会触发频繁的重绘，建议限制
box-shadow的模糊半径与扩散范围。
-
使用CSS变量来管理颜色：用
--primary-color这样的自定义属性来统一控制图标的颜色，方便更换主题。
-
渐进增强策略：对不支持
clip-path的浏览器，提供降级方案（如纯色方块），确保功能可用。
-
动画优化：使用
transform与opacity实现图形动画，触发GPU加速，避免布局抖动。
适用范围和取舍
CSS3不能解决所有问题，比如非常复杂的插画和照片级别的图像还是要用图片或SVG来制作。如果要经常修改的话，那么使用图片的方式更加灵活一些。在选择方案的时候要考虑好视觉效果、性能优势以及维护费用之间的关系。
总结
CSS3绘图技术把图形和图标转换成样式代码，从而省去了额外的HTTP请求，加快了页面加载速度。通过使用clip-path、渐变以及伪元素等工具来组合使用，再加上一些性能优化的方法，在不降低视觉效果的情况下大大提升了网页的渲染速度和用户体验。把视觉元素用代码表示出来就是前端性能优化由“减少请求”到“消除请求”的重要一步。
