sepia(0.6)～sepia(0.8)更自然，因sepia(1)会丢失细节、暗部糊成一片；需搭配contrast(1.15)、brightness(0.92)、hue-rotate(-8deg)及radial-gradient暗角才显真实怀旧感。
直接用 filter: sepia() 就能加褐色滤镜，但值设成 100% 容易发黑发闷，实际推荐 sepia(0.6)～sepia(0.8) 起手，再微调其他参数。
为什么 sepia(1) 不好用
sepia(1) 或 sepia(100%) 会把所有颜色强行压进棕褐单色通道，丢失细节、暗部糊成一片。尤其在浅色背景或高光丰富的图上，看起来像蒙了一层旧胶片残渣。
- 现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）都支持小数，
sepia(0.7)比sepia(1)更自然 - iOS Safari 15.4 之前版本不支持
sepia()在<img>上单独生效，得套一层<div>并加will-change: filter - 如果图片本身偏黄/橙，
sepia(0.5)可能就足够；冷色调图建议从sepia(0.75)开始试
sepia() 必须搭配的三个参数
纯 sepia() 是“褐色”，不是“老照片”。真正怀旧感来自对比、明暗和色相的协同压制。
-
contrast(1.15)：补足褪色导致的灰平感，但别超1.3，否则暗部断层 -
brightness(0.92)：模拟胶卷轻微欠曝，低于0.85会发雾，高于0.98就失去陈旧味 -
hue-rotate(-8deg)：把棕褐往暖黄偏一点，避免偏绿（正数）或偏紫（负太多），-5deg 到 -12deg 是安全区间
组合写法示例：filter: sepia(0.75) contrast(1.2) brightness(0.92) hue-rotate(-8deg);
立即学习“前端免费学习笔记（深入）”；
暗角（vignette）才是点睛之笔
老照片边缘必然有渐晕，靠 box-shadow 或模糊边框是假的。真实做法是用 radial-gradient 遮罩 + clip-path。
- 给图片外层包一个
<div class="vintage-img"><img></div> - 在
.vintage-img上设：background: radial-gradient(ellipse at center, rgba(0,0,0,0) 70%, rgba(0,0,0,0.15) 100%); - 再加
clip-path: inset(0);确保遮罩贴合图像尺寸 - 注意：这个渐变要和
filter同时生效，不能只加在<img>上，否则会被滤镜影响变色
滤镜顺序不可逆，sepia() 放最前；暗角必须用容器层实现，不能靠伪元素盖在滤镜上——否则 hue-rotate 会把遮罩层也转色。这些细节一错，怀旧就变成“脏”。
