单层linear-gradient做不出磨砂金属感，因其仅能模拟单一方向明暗过渡，缺乏微结构散射、多向高光与底层漫反射；必须用3–4层渐变叠加——基底、斜纹纹理、偏移高光、冷色光晕，并严格控制每层透明度、尺寸、角度及background-position配对，否则易糊成一团。
为什么单层 linear-gradient 做不出磨砂金属感
因为真实磨砂金属表面不是简单明暗过渡，而是「微结构散射 + 多向高光 + 底层漫反射」共同作用的结果。单层渐变只能拉出一条斜线明暗，纹理发平、高光呆板、没有颗粒呼吸感。必须用 3–4 层 linear-gradient 叠加，每层承担不同光学角色，缺一不可。
四层渐变怎么写才不糊成一团
关键在叠加顺序、透明度控制和尺寸/定位配对。浏览器按 CSS background-image 从下到上渲染，所以顺序不能错：
- 基底层：
linear-gradient(135deg, #4a4a4a, #2e2e2e)，设background-size: 200% 200% - 纹理层：
linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.03) 75%, transparent 75%, transparent)，background-size: 8px 8px - 高光层：
linear-gradient(to bottom right, rgba(255,255,255,0.12), transparent 60%)，background-position: 10% 10% - 光晕层：
linear-gradient(120deg, rgba(200,200,220,0.08), transparent 70%)，background-size: 300% 300%
漏掉任意一层的 background-size 或写错 background-position，小纹理就会被拉伸变形，整体糊成灰片。
:hover 高光跳变太生硬怎么办
直接改 opacity 或整个 background 会断层，且重绘卡顿。正确做法是只动两处：
- 高光层
background-position从10% 10%改为15% 15%，模拟光源视角移动 - 基底层加
background-color: #323232（微调明度），避免纯靠渐变导致灰度跳跃 - 只对这两项加
transition: background-position 0.2s, background-color 0.2s，千万别写transition: all
移动端点击反馈发虚或没反应
多层渐变叠加后，:active 状态若只改颜色，视觉变化被纹理完全吃掉；iOS Safari 对 background-position 动画支持也不稳定。
- 改用
transform: scale(0.98)+ 高光层background-position: 15% 15%（悬停态已占 15%，这里保持一致） - 必须加
-webkit-tap-highlight-color: transparent，否则 iOS 点击蒙层盖住所有效果 - 纹理层透明度不能低于
rgba(255,255,255,0.02)，否则 Retina 屏下几乎不可见 - 测试一定要用真机点按，Chrome 模拟器的触发时机和真机不同
最易忽略的是纹理层 background-size 和高光层 background-position 的配比——差 1px 就可能让金属感崩掉，别信“差不多”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
