直接用 css filter 组合实现复古老照片色偏：sepia(0.8) contrast(1.2) brightness(0.9) hue-rotate(-10deg)，配合 radial-gradient 暗角和系统衬线字体，兼容方案用内联 svg 滤镜兜底。
用 filter 实现复古老照片色偏，别碰 background-image 滤镜叠加
纯 CSS 复古滤镜效果，核心是 filter 的组合调用，不是靠贴一张带滤镜的 PNG。直接对图片元素加 filter: sepia(1) contrast(1.2) brightness(0.9) hue-rotate(-10deg) 就能出基础胶片感。但注意：浏览器对 filter 的硬件加速支持不一，Safari 15.4+ 才稳定支持 hue-rotate 在 img 上生效；老版本 Safari 或 iOS WebView 里，得套一层 div 并设 will-change: filter 强制触发渲染管线。
-
sepia(1)是复古基底，值为 0–1，设成 0.7～0.9 更自然，1 容易发棕黑 -
contrast(1.1–1.3)补足老照片的高对比，但超过 1.4 易丢失暗部细节 -
brightness(0.85–0.95)模拟胶卷轻微曝光不足，别低于 0.8，否则灰蒙蒙 -
hue-rotate(-5deg to -15deg)微调偏黄/偏褐倾向，正数会偏绿，偏离复古本意
用 clip-path + radial-gradient 模拟老照片暗角
真正的老照片边缘有渐晕（vignette），不能只靠阴影或模糊边框。最轻量方案是给容器加 clip-path 配合径向渐变遮罩：
div.photo-container {
position: relative;
}
div.photo-container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 70%, rgba(0,0,0,0.15) 100%);
pointer-events: none;
}
关键点：radial-gradient 的起始透明区要够大（70%），否则暗角太生硬；rgba(0,0,0,0.15) 是安全上限，高于 0.2 就像蒙了层灰布。如果图是响应式宽高比不固定，改用 clip-path: inset(0 0 0 0 round 25%) 做圆角裁切，再叠渐变，视觉更协调。
字体和排版怎么“旧”：优先用系统自带衬线体，禁用 Google Fonts
复古感不只在图，文字也得“掉漆”。别引入 Playfair Display 这类现代衬线 Web Font——加载慢、字重假、缺少真实印刷噪点。直接用系统栈：
font-family: "Baskerville", "Hoefler Text", "Times New Roman", serif;
Windows 下走 Times New Roman，macOS 走 Hoefler Text，都带真实铅字质感。字号建议用 1.125rem（18px）起步，行高 1.5，字符间距 0.02em —— 太大显得做作，letter-spacing: 0 又太新。额外加一点 text-shadow: 0 0 1px rgba(0,0,0,0.05) 模拟油墨微扩散，但别加多，否则糊。
IE 和旧 Android 不支持 filter？用 svg filter 降级兜底
IE11 和 Android 4.4 内置浏览器完全不认 CSS filter。这时候得用内联 SVG 滤镜，虽然写法啰嗦但兼容性实打实：
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><filter id="vintage"><fecolormatrix type="matrix" values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"></fecolormatrix><fecomponenttransfer><fefuncr type="linear" slope="1.1"></fefuncr><fefuncg type="linear" slope="1.1"></fefuncg><fefuncb type="linear" slope="1.1"></fefuncb></fecomponenttransfer></filter></svg>
然后在图片上写 filter: url(#vintage)。注意：SVG 必须在 HTML 文档内（不能外链），且 <svg></svg> 标签得放在 开头或结尾，否则 IE11 找不到 ID。这个矩阵值是标准 Sepia 转换，比 CSS 的 sepia() 更可控，但没法动态调参——所以只用于兜底，主逻辑仍走 CSS filter。
真正难的是平衡：暗角太重压住主体，色偏太狠像故障，字体太细失真。所有参数都要以原图灰度分布为基准微调，没有万能值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
