sepia()单独使用因仅做rgb单色映射再叠棕调，不调整明暗与对比，致原图越平则效果越灰蒙，看似怀旧实为细节压缩与色相抹平；推荐sepia(0.6)～sepia(0.75)配合contrast(1.3)、brightness(0.95)并按此顺序书写。
sepia() 单独用为什么看起来像“洗掉色”的旧打印机？
因为 sepia() 本质是把 RGB 映射成单色再叠棕调，不改明暗分布，也不补对比——原图越平，结果越灰蒙蒙。你看到的“怀旧感”其实是错觉，实际是细节被压缩、色相被抹平后的视觉疲劳。
常见错误现象：filter: sepia(1) 加到人像上，皮肤发闷；加到带文字的 Banner 上，文字边缘糊；在浅底深字容器里，反而降低可读性。
- 数值不是越接近 1 越复古：
sepia(0.6)～sepia(0.75)更自然，保留一点冷调底色或暖棕倾向，避免棕红过重 -
sepia(1)在 Safari 15.4 之前有渲染抖动，动画中慎用 - 它对 SVG 图标、内联文字等矢量内容作用生硬，不如直接调
color和background-color
怎么配 contrast() 和 brightness() 才不假？
老照片不是“变棕”，而是明暗被压缩、高光偏暖、阴影微青——contrast() 和 brightness() 是低成本模拟关键，但参数稍偏就会翻车。
- 优先试
contrast(1.3)起步，用 DevTools 实时拖动调节；超过contrast(1.4)容易让暗部死黑、亮部溢出 -
brightness(0.95)压暗约 5%，符合胶片曝光偏保守的物理特性；别低于brightness(0.85)，否则整图灰蒙蒙 - 避免
contrast()和brightness()叠加使用——两者作用域重叠，容易局部过曝或发灰 - 在 Retina 屏看着刚好，普通屏可能显暗，可配合
@media (-webkit-min-device-pixel-ratio: 2)微调
filter 链式写法顺序为什么不能乱？
浏览器按从左到右顺序执行滤镜函数，顺序错了，颜色表现就偏了。比如先拉对比再上棕调，暗部会更易塌陷；反过来，先上色再调层次，棕调才均匀、中间灰才保得住。
- 正确顺序：
filter: sepia(0.7) contrast(1.3) brightness(0.95) - 错误写法：
filter: contrast(1.3) sepia(0.7)—— 暗部发黑、高光漂白，棕调浮在表面 -
blur(0.3px)若加入链中，必须放在最后，否则会模糊后续所有效果（包括暗角和噪点） - 移动端 Safari 对链式 filter 偶发卡顿，建议去掉
blur()或降为blur(0.2px)
真正难的不是写 filter，而是判断这张图适不适合加 sepia
高饱和人像、带清晰文字的 Banner、浅色背景上的图标，加了 sepia() 后棕褐覆盖常导致可读性崩坏；而低对比手机直出图，不加 contrast() 和 brightness() 几乎无效。
更隐蔽的问题：filter 不触发重排，但强制重绘；对瀑布流里几十张图批量加滤镜，得提前用 will-change: filter 提示渲染引擎——但它本身有内存开销，别滥用。
真正胶片感的关键信号（颗粒、晕影、褪色偏移）CSS filter 做不到，得靠 background-image 叠噪点 PNG 或 radial-gradient 暗角兜底。这些不是锦上添花，是必要补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
