纯CSS无法实现真实素描，但可用filter组合（grayscale+contrast+brightness+saturate）与clip-path inset动画模拟铅笔画效果，关键在于控制反差而非边缘检测，需避免sepia等暖色滤镜，并注意will-change优化及浏览器兼容性。
纯 CSS 实现不了真正意义的素描（即边缘检测+灰度映射），但能用 filter 组合快速模拟出视觉上接近铅笔画的效果——关键不是“算边缘”，而是“控反差”。
为什么直接用 grayscale(100%) contrast(200%) 效果发灰、没笔触感
因为素描的核心不是高对比，而是暗部压得够低 + 亮部保留细节 + 边缘有“硬过渡”。只加 contrast() 会把中间灰阶也拉平，导致五官糊成一片。
- 起始态建议用
filter: grayscale(100%) contrast(3) brightness(0.6) saturate(0.2)：亮度压到 60% 才能让后续“显形”有层次 - 别用
sepia()或hue-rotate()：它们引入暖色偏移，破坏铅笔稿的冷灰调 -
contrast(3)是 300%，不是 3% —— 浏览器解析时省略 % 符号也认作百分比值，但写全更稳妥
clip-path 动画怎么做出“笔画渐渐涂满”的错觉
这不是描边动画，而是靠裁切区域逐步扩大 + 滤镜强化线条感来欺骗眼睛。Safari 对 SVG clip-path 的 CSS 动画支持不稳定，必须用 inset() 或 polygon()。
- 推荐从下往上推入：
clip-path: inset(100% 0 0 0);→clip-path: inset(0); - 图片必须设
display: block，否则某些 Chrome 版本里clip-path不生效 - 动画卡顿？加
will-change: clip-path触发图层提升；同时剥离transform: scale()或filter: blur()到独立容器，避免重绘争抢
哪些场景该放弃 CSS，改用 Canvas 或 SVG
当你要控制真实笔画顺序（比如先画轮廓再画阴影）、或处理复杂纹理照片（人脸、毛发、树叶）时，CSS 就力不从心了。
立即学习“前端免费学习笔记（深入）”；
- Canvas 路径动画需导出 SVG 轮廓，用
stroke-dasharray+stroke-dashoffset控制绘制节奏，getTotalLength()在部分自闭合路径上不准，建议手动缓存长度 - SVG
feConvolveMatrix可加速 Sobel 边缘检测，但 IE 完全不支持，Edge 17+ 才可用；bias="128"必须设，否则卷积结果溢出变黑块 - Canvas 处理超过 1200px 宽的图易卡顿，
getImageData()是主线程阻塞操作，别在滚动中触发
最常被忽略的一点：所有 CSS 滤镜都作用于整个元素，无法只对 ROI（比如只给眼睛加素描感）生效；真要局部处理，只能切图、分层、或上 Canvas 像素级操作。
