金属拉丝按钮需多层渐变模拟纹理、多层阴影构建立体反光、outline替代border实现聚焦态，小屏禁用纹理保性能，细节精度决定质感成败。
金属拉丝按钮不是靠“加个渐变+阴影”就能糊弄出来的——它依赖多层叠加的明暗过渡、精确控制的高光方向，以及对真实金属表面各向异性纹理的模拟。纯 CSS 能做到，但必须放弃单层 background 思路。
用 repeating-linear-gradient 模拟拉丝纹理
真实拉丝金属的条纹是细密、平行、有方向性的，不能靠图片或模糊噪点。CSS 中最可控的方式是用两层 repeating-linear-gradient 叠加：一层做主向条纹（比如 45deg），另一层做更细、偏移的干扰线增强质感。
- 主纹理用
background-image: repeating-linear-gradient(45deg, #b0b0b0, #b0b0b0 1px, transparent 1px, transparent 2px) - 叠加一层 46deg 的细纹（
0.5px宽）制造视觉扰动，避免机械感 - 注意：
transparent必须明确写，不能省略；否则 Safari 渲染异常 - 纹理色值别用纯灰——
#b0b0b0比#aaaaaa更耐看，冷调中带一点暖底
用多层 box-shadow 构建立体反光
金属按钮的“拉丝感”本质是光线在凹凸纹理上的定向反射。单层阴影只能出浮雕，多层才是关键：内阴影模拟凹槽暗部，外阴影模拟边缘高光，再加一层极细偏移阴影模拟拉丝方向的亮线。
- 内阴影：
inset 0 1px 2px rgba(0,0,0,0.2)（压暗底部） - 主外阴影：
0 2px 4px rgba(0,0,0,0.15)（基础立体） - 方向高光：
2px 2px 0 #e0e0e0（严格按拉丝角度设偏移，比如 45deg 就用1.4px 1.4px） - 所有阴影顺序不能错——浏览器按书写顺序叠层，高光必须在最上层
禁用 border，改用 outline 控制聚焦态
金属按钮一旦加 border，立刻破功：硬边框和拉丝的柔顺过渡冲突。真正的金属件边缘是微倒角+漫反射，CSS 里最接近的是 outline 配合 outline-offset。
立即学习“前端免费学习笔记（深入）”；
- 默认状态去掉
border，只留outline: none - 聚焦时用
outline: 2px solid #4a90e2+outline-offset: 2px，形成悬浮光晕而非硬框 -
outline不占布局空间，不会导致按钮跳动——这点比border稳定得多 - 别忘了加
outline-offset: -2px在悬停态，制造轻微“吸住”感
响应式下关闭纹理，保性能不卡顿
小屏设备渲染细密 repeating-linear-gradient 开销大，尤其低端安卓机容易掉帧。不是所有屏幕都需要拉丝——移动端优先保证交互流畅。
- 用
@media (max-width: 768px)包裹纹理相关样式 - 移动态直接回退到单层
linear-gradient(to bottom, #c0c0c0, #a0a0a0)+ 强化阴影 - 禁用
background-attachment: fixed（哪怕没写也检查一遍），它在滚动时强制重绘纹理 - 真机测试重点看快速连点时按钮是否“发虚”——那是 GPU 渲染过载的表现
最难的不是写出那几行 CSS，而是让每层阴影的偏移值、每条渐变的像素宽度、每个色值的冷暖倾向都彼此咬合。差 0.2px，差 2°，差一个 rgba 的 alpha 值，质感就滑向廉价塑料。调的时候盯着真实不锈钢门把手看五分钟，比调十次浏览器更管用。
