金属按钮需双层linear-gradient叠加：第一层灰阶基底，第二层rgba高光层，配合box-shadow增强立体感，hover时仅位移高光层并微调阴影。
用 linear-gradient 叠加模拟金属高光与暗部
纯色按钮根本撑不起金属感，关键在明暗过渡的「物理逻辑」：顶部偏白（受光面）、中部过渡、底部偏灰黑（环境遮蔽）。单层渐变做不到这种层次，必须叠加两层 linear-gradient —— 一层主色调基底，一层透明度可控的亮光覆盖。
常见错误是直接套用网上搜到的「金属渐变代码」，结果按钮发灰、发平、没纵深。问题出在第二层渐变用了不透明色或角度不对。正确做法是：
- 第一层用深浅灰阶构成主体（比如
linear-gradient(to bottom, #e0e0e0, #9a9a9a)） - 第二层用
rgba(255,255,255,0.4)到rgba(255,255,255,0)，方向设为to bottom或to top，控制高光位置 - 两层都写进
background-image，用逗号分隔，顺序很重要：后写的在上层
为什么 background-blend-mode 不适合做金属光泽
有人试过用 multiply 或 overlay 混合两层实色渐变，结果按钮整体变暗、细节糊掉。因为 background-blend-mode 是像素级混合，会吃掉渐变本身的明暗梯度，尤其在浅灰区域容易泛白失真。
真正可控的方式是「透明层叠」：第二层只负责提亮局部，不参与颜色运算。所以必须用带 alpha 的 rgba() 或 hsla()，而不是靠 blend mode 去“调”效果。
顺带一提：background-blend-mode 在 Safari 旧版本里兼容性差，而双渐变写法所有现代浏览器都稳。
box-shadow 配合渐变强化边缘立体感
只有渐变还是扁的。金属按钮必然有轻微倒角和边缘聚光，靠 box-shadow 补这个缺口最轻量。
- 内阴影模拟按压凹陷：
inset 0 -2px 4px rgba(255,255,255,0.3) - 外阴影模拟高光溢出：
0 1px 2px rgba(0,0,0,0.15) - 别加太多层阴影——三层以上渲染开销明显上升，且在低分辨率屏上容易糊成一团灰边
注意：阴影颜色要和渐变主色系一致，比如主色偏冷灰，阴影就别用暖黄；否则金属感瞬间垮掉。
hover 状态下光泽动效的关键帧取值
鼠标悬停时，如果只是改背景色，光泽感就断了。要让高光层「滑动」，制造光线掠过表面的错觉。
做法是给第二层渐变加 background-position 动画，但不能从 0% 直接到 100%——那样太假。合理区间是：
- 默认状态：
background-position: 0% 0%, 0% 20%（高光起始偏上） - hover 时：
background-position: 0% 0%, 0% 60%（高光下沉，模拟视角变化） - 动画用
ease-out，避免机械感；时长控制在0.25s内，再慢就拖沓
别用 transform: scale() 模拟按压——金属不是橡胶，形变会破坏质感。真正的金属反馈是光泽位移+微阴影加深，不是缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
