单层linear-gradient无法实现金属感，因其仅能模拟均匀明暗过渡，缺乏亮区→过渡带→遮蔽暗部的三段式节奏及微结构反射；必须用2–4层渐变叠加，严格控制每层角度、透明度、background-size与background-position，否则易发灰、糊成一片或显塑料感。
纯色或单层渐变按钮做不出金属感——人眼识别金属，靠的是明暗三段式节奏（亮区→过渡带→遮蔽暗部）和表面微结构反射，必须用多层 linear-gradient 叠加实现，且每层角度、透明度、尺寸都不可随意。
为什么单层 linear-gradient 一定失败
单层渐变只能输出均匀过渡，比如 linear-gradient(to bottom, #d0d0d0, #707070)，结果是灰平一片，没有纵深。真实金属表面受光后有物理级响应：顶部高光锐利、中部灰阶柔和、底部因环境遮蔽略泛青灰。这种节奏无法靠两个端点色硬塞出来。
常见错误包括：
- 用不透明白色做高光层，导致按钮发白、塑料感
- 两层渐变方向相同（如都
to bottom），高光与暗部打架，视觉冲突 - 漏写
background-size，尤其在高 DPI 屏上，噪点层直接糊成色块
双层渐变实现基础金属感（兼容性最强）
这是最稳、浏览器支持最好（Chrome/Firefox/Safari 全通）的方案，适合按钮默认态。核心是「基底 + 高光」两层叠放，顺序不能错。
示例代码：
button {
background-image: linear-gradient(to bottom, #b0b0b0, #6a6a6a),
linear-gradient(to top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
background-size: 100% 100%, 100% 100%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15),
inset 0 -2px 4px rgba(255, 255, 255, 0.3);
}
关键点：
- 第二层必须写在逗号后面——CSS 多背景中，后写的图层在上方
-
rgba(255,255,255,0.3)是安全上限，再高就泛白；0 端必须完全透明，否则底部发雾 -
box-shadow不是装饰：外阴影补高光溢出，内阴影模拟轻微按压凹陷，缺一不可
三层渐变实现磨砂金属感（需精确控噪点）
要出磨砂感，必须加入纹理层——不是图片，而是用 linear-gradient 构造的 8px×8px 斜纹噪点，它模拟喷砂微颗粒的漫反射。
典型结构（从下到上）：
- 底层：
linear-gradient(to bottom, #c0c0c0, #808080)—— 冷灰基底 - 中层：
linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0.04) 75%, transparent 75%, transparent)—— 45° 斜纹，透明度严格控制在 0.03–0.06 - 顶层：
linear-gradient(135deg, rgba(255,255,255,0.15), transparent)—— 定向高光，角度决定冷暖倾向
必须同步设置：
-
background-size: 100% 100%, 8px 8px, 100% 100%—— 噪点层尺寸不准，质感立刻垮掉 -
background-position: 0 0, 0 0, 0 0—— 否则各层错位，出现明显接缝
:hover 和 :active 动效别碰基底
悬停时如果整个背景色变，光泽逻辑就断了。金属反光是视角变化导致的高光位移，不是整体提亮。
正确做法：
-
:hover：只动高光层background-position，比如从0% 20%→0% 60%，配合transition: background-position 0.25s ease -
:active：避免改颜色或 opacity，改用transform: scale(0.98)+ 高光层微调至15% 15%，并加-webkit-tap-highlight-color: transparent防 iOS 蒙层 - 千万别给整个
background-image加transition—— 浏览器会重绘全部图层，卡顿明显
最易被忽略的是：所有层的透明度值（尤其是噪点层的 0.04、高光层的 0.15）必须在不同亮度屏幕下实测校验，Retina 屏上 0.02 几乎不可见，0.08 又显网格，这个区间没有容错余地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
