纯CSS无法实现真正手绘效果，仅能通过filter组合、伪元素纹理叠加和遮罩等视觉技巧模拟；canvas才是支持实时轨迹、压感和交互的唯一方案。
纯 CSS 无法实现真正意义上的“手绘”或“画笔”效果——它没有笔触路径、压感模拟、边缘毛糙或颜料叠加等能力。所谓“手绘滤镜”，实际是用 filter 组合 + 伪元素纹理覆盖 + 动态遮罩模拟的视觉近似，且必须配合响应式约束才不至于在小屏上糊成一片。
为什么直接写 filter: blur(2px) contrast(1.3) 不算手绘效果
CSS 的 filter 是全局像素变换，不区分区域、不识别边缘、不模拟运笔方向。你看到的“手绘感”其实是以下三者之一或组合：
- 低强度
sepia()+ 极微弱blur(0.2px)+contrast(0.9)模拟老纸泛黄与轻微晕染 - 用
::before叠加带噪点/纸纹的半透明 PNG（如url("sketch-overlay.png")），再用background-blend-mode: multiply混合 - 通过
clip-path或mask-image做不规则裁切，制造“未画完”“潦草收笔”的错觉
浏览器不会凭空生成画笔轨迹；所有“手绘”都是设计 trick，不是算法生成。
响应式下如何避免手绘纹理拉伸变形
关键在纹理图本身和容器控制方式：
立即学习“前端免费学习笔记（深入）”；
- 纹理图必须是 SVG 或高 DPR 适配的 PNG（如 2x 尺寸），且尺寸固定（推荐 200×200px）
- 用
background-size: contain而非cover，防止拉伸失真 - 父容器需设
aspect-ratio: 4/3或固定宽高比，否则contain在窄屏下会留白过多 - 移动端慎用
mask-image：iOS Safari 对mask-image: url(...)支持不稳定，建议降级为clip-path: polygon(...)配合媒体查询微调坐标
示例结构：
<div class="sketch-img"><img src="photo.jpg" alt=""></div>，样式中：
.sketch-img { position: relative; aspect-ratio: 4/3; } .sketch-img::before { content: ""; position: absolute; inset: 0; background: url("sketch-line.svg") no-repeat center / contain; opacity: 0.15; mix-blend-mode: multiply; }
filter 组合顺序与移动端兼容性陷阱
想让“手绘感”在 iPhone 和安卓 WebView 上一致，必须注意三点：
-
sepia(0.6) brightness(0.95) contrast(0.85)必须按此顺序写，颠倒后 iOS 会把暗部压成死黑 - 绝对不要在
filter中混用单位：blur(0.2)（无单位）在 Safari 中被忽略，必须写blur(0.2px) - 安卓低版本 WebView（如 Android 8-9 系统自带）不支持多函数链式
filter，需用-webkit-filter并拆成单值 fallback：img.sketch { -webkit-filter: sepia(0.6); filter: sepia(0.6) brightness(0.95) contrast(0.85); }
真正难的不是写出效果，而是让同一段 CSS 在 Chrome 127、Safari 19.0、Samsung Internet 25 上渲染出可接受的相似度——这需要实机测试，不能只信 Can I Use。
canvas 方案才是真手绘的唯一出口
如果你需要鼠标/触控轨迹实时生成线条、压感粗细变化、橡皮擦局部还原，CSS 完全无能为力。此时必须用 canvas + getImageData + 贝塞尔插值：
- 监听
pointerdown/move/up，记录点序列，用ctx.bezierCurveTo()绘制抗锯齿笔迹 - 将手绘层（
canvas）与原图层（img）用position: absolute叠加，再统一包裹进响应式容器 - 缩放时重绘 canvas：监听
window.resize，按devicePixelRatio重设canvas.width/height，再重绘路径
这不是“加个 class 就行”的方案，但它是唯一能响应真实交互的手绘路径。别被“CSS 万能”误导——滤镜能模拟结果，canvas 才能承载过程。
