真实磨砂金属感需三层渐变叠加：底层冷灰基底、中层8px×8px 45°噪点（透明度0.03～0.06）、顶层135°定向高光（透明度0.08～0.2），缺一不可，且必须指定background-size防止失真。
磨砂金属质感的核心是多层渐变叠加而非单层描边
纯靠 border 或单层 linear-gradient 做不出真实磨砂金属感——它本质是微颗粒漫反射 + 金属高光 + 深浅不一的冷暖色带。必须用至少 3 层 linear-gradient 叠加：底层冷灰基底、中层细密噪点模拟、顶层定向高光。少一层，质感就发平或塑料感。
CSS 中用 multiple backgrounds 实现图层堆叠
background 属性支持逗号分隔的多值写法，顺序决定图层上下关系（第一个最上层）。关键约束：所有渐变必须指定尺寸（background-size）且不能为 auto，否则噪点层会拉伸失真。
典型写法示例：
button {
background:
linear-gradient(135deg, rgba(255,255,255,0.15), transparent), /* 顶层高光 */
linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0.03) 75%, transparent 75%, transparent), /* 中层噪点 */
linear-gradient(to bottom, #c0c0c0, #808080); /* 底层金属基色 */
background-size: 100% 100%, 8px 8px, 100% 100%;
background-position: 0 0, 0 0, 0 0;
}
噪点层必须用 45° 方向 + 精确百分比控制颗粒密度
常见错误是直接用 repeating-linear-gradient，但会导致线条感太强。真正磨砂感依赖「视觉错觉」：用 linear-gradient 在小尺寸（如 8px 8px）内制造重复断点。
-
45deg方向比水平/垂直更接近真实金属轧制纹理走向 - 每个色块严格控制在
25%宽度，避免出现明显方格 - 透明度设为
0.03～0.06：太高显网格，太低无质感 - 务必配合
background-size: 8px 8px，否则在高 DPI 屏幕上颗粒糊成一片
高光层角度和透明度决定金属冷暖倾向
高光不是白色，而是带色温的浅灰：冷金属（不锈钢）用 rgba(255,255,255,0.15)，暖金属（黄铜）换成 rgba(255,220,180,0.12)。角度也影响观感：
-
135deg：模拟左上光源，适合多数按钮默认朝向 -
90deg：横向高光，强化拉丝感，但易显廉价 - 透明度超过
0.2→ 塑料反光；低于0.08→ 高光消失，失去金属辨识度
实际项目里，磨砂金属最难调的是中层噪点与高光的平衡——稍不注意就会变成「磨砂玻璃」或「拉丝铝板」，得盯着不同亮度屏幕反复校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
