box-shadow直接加无法模拟金属反光，需至少两层：上偏移白高光（如0 -2px 5px -2px #fff）与下偏移灰暗部（如0 4px 10px -4px rgba(30,30,30,0.6)），并配合垂直渐变背景（如linear-gradient(to bottom, #e0e0e0, #b0b0b0)）及禁用边框才显真实金属质感。
button 元素直接加 box-shadow 无法模拟金属反光
纯 box-shadow 只能投出单向、发散的柔边阴影，而金属质感依赖高光区域与暗部过渡的精确控制——它需要至少两层叠加：一层强白高光（模拟光源直射），一层深灰/黑内阴影（模拟边缘压暗）。直接写 box-shadow: 0 0 15px #fff 会显得像荧光笔，不是金属。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
box-shadow的多层语法，逗号分隔至少两个阴影值 - 第一层设为
0 -2px 5px -2px #fff（上偏移 + 负扩散，模拟顶部高光） - 第二层设为
0 4px 10px -4px rgba(0,0,0,0.4)（下偏移 + 暗色，模拟底部压暗） - 避免使用纯黑
#000，金属暗部带灰度，推荐rgba(30,30,30,0.6)
必须配合 background 渐变才显金属本色
纯色背景 + 发光阴影只是“亮按钮”，不是“金属按钮”。真实金属表面有微弱明暗渐变，尤其在垂直方向。CSS 线性渐变是低成本实现方式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
background: linear-gradient(to bottom, #e0e0e0, #b0b0b0)模拟冷轧钢的哑光反光 - 若要不锈钢感，改用
linear-gradient(to bottom, #f5f5f5, #d0d0d0)并降低阴影扩散值（blur-radius控制在 3–6px） - 禁用
background-image或图片纹理——它会和阴影冲突，且增加加载负担 - 别忘了加
border: none，默认button边框会破坏整体光感连贯性
:hover 状态下阴影参数必须重调，否则失真
鼠标悬停时如果只放大阴影尺寸或增强颜色，会立刻暴露“假发光”感。金属受力按压时，高光收缩、暗部延展，物理逻辑要一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 悬停时把高光层的
blur-radius缩小（如从5px→2px），让高光更锐利 - 同时把暗部层的
spread-radius微增（如从-4px→-2px），模拟边缘轻微“塌陷” - 禁用
transition: all .3s—— 多层阴影过渡需分别指定属性：transition: box-shadow .2s ease - 测试时用深色网页背景（如
#222）查看，浅背景会掩盖暗部层次
IE11 及旧版 Safari 不支持多层 box-shadow 的 alpha 通道渲染
在 IE11 中，rgba() 阴影会被降级为纯色，导致高光过曝、暗部死黑；Safari 9–12 对负 spread-radius 支持不稳定，可能使高光错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 面向现代浏览器（Chrome 80+ / Firefox 75+ / Safari 13+）可放心用完整写法
- 需兼容 IE11？改用两层伪元素：
::before绘高光，::after绘暗边，再用z-index叠加 - 检查时重点看
box-shadow中是否混用inset和外阴影——旧引擎对此解析异常，一律用外阴影组合模拟
