实现真实金属反光需至少三层渐变叠加：底层固有色（如hsl(210,8%,45%)）、中层哑光过渡（rgba白横向渐变）、顶层窄高光（宽度2%–4%，如135deg渐变）；层叠顺序须从底到顶书写，配合精确的background-size与background-position控制；伪元素更适合动态高光；移动端建议用固定像素替代百分比尺寸。
用 linear-gradient() 叠加出金属反光不是靠“一层渐变”
单层 linear-gradient() 只能模拟光照方向，做不出金属那种高光+漫反射+底色过渡的层次感。真要接近铝、不锈钢或镀铬效果，得至少叠 3 层：底层固有色 + 中层哑光过渡 + 顶层锐利高光。每层用不同角度、透明度和位置控制，否则容易发灰或像塑料。
- 底层建议用
hsl(210, 8%, 45%)这类低饱和、中明度色，避免纯灰（#888显脏） - 中层用
rgba(255, 255, 255, 0.08)到rgba(255, 255, 255, 0.02)的横向渐变，模拟漫反射衰减 - 顶层高光必须窄——比如
linear-gradient(135deg, transparent 48%, white 50%, transparent 52%)，宽度控制在 2%–4% 内才像真实反光
CSS 多层渐变的书写顺序直接影响金属质感强弱
层叠顺序不是从上到下写代码的顺序，而是「最后写的那层在最上面」。如果把高光层写在最前面，它会被后面写的底色层盖掉。实际调试时，常因顺序错导致高光消失，只看到一片匀色。
- 务必按「从底到顶」顺序书写：
background: linear-gradient(...底色), linear-gradient(...过渡), linear-gradient(...高光); - 所有层必须指定尺寸，否则默认铺满容器，高光就拉伸成条纹——用
background-size: 200% 200%, 150% 150%, 30% 30%;分别控制 - 配合
background-position: center, center, 80% 20%;把高光偏移到右上角，更符合常规打光逻辑
伪元素比多层背景更适合做动态金属反光
当需要鼠标悬停时高光移动（模拟视角变化），硬编码多层 background 很难平滑过渡。用 ::before 或 ::after 单独承载高光层，再对它的 transform 或 background-position 做 transition，响应更自然，也避免重绘整块背景。
- 给容器设
position: relative;，伪元素设position: absolute;覆盖其上 - 伪元素的
background只放高光层，其余两层留在容器本体的background里 - 悬停时改伪元素的
background-position: 60% 40%;，比同时动三层背景更轻量
移动端 Safari 对多层渐变的 background-size 支持不稳定
iOS 15–16 的 Safari 在处理超过 2 层且含百分比 background-size 的渐变时，偶尔会忽略某一层尺寸，导致高光错位或消失。这不是 bug，是渲染管线对多层缩放的优化取舍。
立即学习“前端免费学习笔记（深入）”；
- 绕过方式：把高光层的尺寸换算成固定像素值，比如
background-size: 30px 30px;，再用background-repeat: no-repeat;配合background-position定位 - 检测手段：在真机上用
background: red;临时覆盖某一层，确认是否被渲染 - 不推荐降级为单层渐变——牺牲质感不如用
filter: brightness(1.1) contrast(1.2);微调已有色块
金属质感的关键不在“用了多少层”，而在每一层的透明度、角度、尺寸是否匹配真实光学路径。调的时候盯着实物照片比看代码更重要——尤其注意高光边缘有没有轻微羽化，那才是决定像不像的最后一道坎。
