金属质感按钮需两层反向线性渐变叠加（基底to bottom+高光to top）、rgba(255,255,255,0.2–0.4)控制高光、box-shadow补边缘结构，并仅对background-position做hover过渡。
直接用单层 linear-gradient 做不出金属质感按钮——它连明暗节奏都压不住，更别说立体感。真正可用的方案必须叠加至少两层渐变，并配 box-shadow 补边缘结构，否则就是灰扑扑的塑料片。
两层渐变叠加是硬门槛，顺序和方向不能错
第一层定基底明暗（比如 linear-gradient(to bottom, #b0b0b0, #6a6a6a)），第二层控高光流向（linear-gradient(to top, rgba(255,255,255,0.3), rgba(255,255,255,0))）。关键点：
- 第二层必须写在逗号后面，否则被盖住
- 两层方向必须相反：基底
to bottom，高光就得to top，不然视觉打架 -
rgba()透明度严格控制在0.2–0.4区间；超过0.4泛白，低于0.2高光消失 - 别碰
background-blend-mode：Safari 15.4 之前基本不工作，且吃掉渐变梯度细节
box-shadow 不是锦上添花，是补立体结构的关键
只有渐变，按钮还是纸片。金属必然有微倒角和边缘聚光，box-shadow 就是补这个缺口最轻量的方式：
- 外阴影模拟高光溢出：
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) - 内阴影模拟轻微按压凹陷：
box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.3) - 阴影颜色必须和主渐变冷暖一致：主色偏冷灰，阴影就用
rgba(0,0,0,0.15)；若主色偏暖黄，就得换rgba(100,80,0,0.1) - 三层以上阴影在低端屏会糊边，别堆
:hover 动效只动高光层，别碰基底
鼠标悬停时如果整个背景色都变，光泽逻辑就断了。真实金属是光线掠过表面，不是整块变亮：
- 默认状态：
background-position: 0% 0%, 0% 20%（高光起始偏上） - hover 时：
background-position: 0% 0%, 0% 60%（高光下沉，模拟视角变化） - 过渡只锁定
background-position：transition: background-position 0.25s ease-out - 千万别给整个
background加transition——浏览器重绘全部图层，卡顿明显
移动端点击反馈容易失效，得绕开渲染陷阱
多层渐变叠加后，:active 状态若只改颜色或 opacity，视觉变化会被纹理掩盖；iOS Safari 对 background-position 动画支持也不稳：
- 改用
transform: scale(0.98)配合background-position微调（如高光层移到15% 15%） - 必须加
-webkit-tap-highlight-color: transparent，否则 iOS 点击蒙层盖住所有效果 - 纹理层透明度不能低于
rgba(255,255,255,0.02)，否则 Retina 屏下几乎不可见 - 测试务必用真实设备点按，Chrome 模拟器的触控反馈和真机差异很大
最难调的是中层噪点与高光的平衡——稍不注意就会变成「磨砂玻璃」或「拉丝铝板」，得盯着不同亮度屏幕反复校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
