纯HTML+CSS可实现插画风404页：用text-shadow模拟铅笔字、内联SVG纸框与噪点纹理、低饱和配色（#e6d3a7/#8c6d31）、圆润字体（Comic Neue）、12vw响应式“404”居中及轻微wobble动画，全程无JS、无外部依赖。
用纯 HTML + CSS 实现插画风 404 页面，不依赖框架
直接写一个带手绘感、留白多、有轻微噪点或描边效果的 404 页面，完全不需要 JS 或第三方库。核心是用 CSS 模拟插画质感：比如 text-shadow 做铅笔字效果、border-image 或 background-image 加纹理、filter: drop-shadow() 替代生硬的 box-shadow。
关键不是“画图”，而是用 CSS 控制视觉节奏——字体选圆润无衬线（如 "Comic Neue"、"Nunito"），颜色用低饱和度组合（比如 #e6d3a7 配 #8c6d31），再加一层半透明白噪点背景图（url("data:image/svg+xml,...") 内联更轻量）。
- 避免用 PNG 贴图做主视觉——加载慢、缩放糊、响应式难适配
- 文字“404”建议用
font-size: 12vw+line-height: 1居中，比绝对定位更稳 - 如果想加小插画元素（比如歪斜的铅笔、纸角卷边），用 SVG 内联写进 HTML，控制
width和transform: rotate(-1deg)
让“404”文字看起来像手写/铅笔字
CSS 本身不能生成手写轨迹，但能骗过眼睛：叠加多层 text-shadow 模拟铅笔偏移和压力变化，再配合轻微抖动动画强化错觉。
h1 {
font-family: "Comic Neue", cursive;
font-weight: 400;
font-size: 12vw;
text-shadow:
0.05em 0.05em 0 #d4b98a,
-0.05em -0.05em 0 #d4b98a,
0.03em 0.03em 0 #c9a975,
-0.03em -0.03em 0 #c9a975,
0 0 0.1em rgba(0,0,0,0.1);
animation: wobble 4s ease-in-out infinite;
}
- 阴影顺序很重要：先大偏移（模拟下笔歪斜），再小偏移（模拟笔尖抖动）
-
animation: wobble只需轻微旋转 ±0.3deg 和位移 ±0.1em，太强就变故障风 - 别用
contenteditable或 canvas 模拟手写——加载重、可访问性差、SEO 不友好
用 SVG 内联画一个纸张质感的边框
比起引入外部图片或复杂 CSS 渐变，一段 20 行以内的 SVG 就能做出带毛边、微卷曲的纸框，且缩放不失真、支持 CSS 变量换色。
把这段 SVG 直接塞进 很多人第一反应是找“手绘纸张纹理.jpg”当背景，但实际项目里这会带来三个隐性问题： 更稳妥的做法是：用 真正难的不是画得多像，而是让所有元素在不同设备、不同系统偏好、不同网络条件下都保持一致的“手作感”——这意味着纹理要够轻、字体要够稳、动画要够节制。<svg viewbox="0 0 200 120" width="100%" height="100%" preserveaspectratio="none"><path d="M10,10 Q30,5 50,10 T90,10 T130,10 T190,10 L190,110 Q185,115 180,110 L20,110 Q15,115 10,110 Z" fill="none" stroke="#d4b98a" stroke-width="2" stroke-linejoin="round"></path></svg>
Q 是二次贝塞尔曲线，控制纸张顶部轻微拱起stroke-linejoin="round" 让转角更柔和，避免机械直角.paper-frame svg { --paper-color: #e6d3a7; }，再用 stroke: var(--paper-color)
为什么不要用 background-image 引入手绘纹理
background-size: cover 又易拉伸变形background-image: url("data:image/svg+xml,%3Csvg...%3E") 内联极简噪点 SVG，或者干脆用 repeating-linear-gradient 叠两层 1px 线条模拟纸纹。复杂插画元素只保留在 SVG 内联区域，其他一律 CSS 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
