纯CSS立体按钮的关键在于阴影、渐变与状态变化的协同：用双向box-shadow模拟凸起，linear-gradient角度与色阶决定质感，:active需位移+阴影收缩，并统一色系明度层级。
纯 CSS 就能做出有立体感的按钮，不需要 JS 或图片 —— 关键不是堆效果，而是理解阴影、渐变和状态变化的协同逻辑。
box-shadow 双向嵌入是立体感的核心
很多初学者只用单层 box-shadow，结果按钮看起来“浮”在页面上，而不是“凸起”。真正模拟物理按压感，得靠内外双阴影组合：
-
box-shadow: 0 2px 0 2px #ccc, 0 -2px 0 2px #fff：外下阴影模拟光源在上方，外上阴影模拟高光面 - 配合
inset阴影可强化凹陷错觉，比如inset 0 1px 0 #eee模拟按钮顶部亮边 - 注意顺序：浏览器按书写顺序渲染，高光（浅色）阴影写前面，暗影（深色）写后面，否则会被盖住
- 移动端慎用过大的
blur值（如 >12px），会导致模糊边界，影响点击区域识别
linear-gradient 方向与色阶决定“金属感”还是“塑料感”
渐变不是随便选两个颜色就行。linear-gradient 的角度和明度差直接决定质感类型：
- “金属感”倾向用小角度（
145deg）+ 高对比色阶（如#4f4f4f→#3d3d3d），模拟反光条纹 - “塑料感”适合大角度（
to bottom）+ 中等明度差（如#6fa3ef→#4e76d0），过渡柔和 - 避免使用纯黑/纯白作为渐变端点，容易显得生硬；加一点灰度（如
#222而非#000）更自然 - 旧版 Safari 需要
-webkit-linear-gradient前缀，但现代项目可忽略（iOS 14.5+ 已全面支持标准语法）
:active 状态必须位移 + 阴影收缩，否则“按不下去”
用户点击时没反馈，立体感就断了。仅改背景色或透明度远远不够：
立即学习“前端免费学习笔记（深入）”；
- 必须加
transform: translateY(2px)（注意是向下位移，模拟按压下沉） - 同步收窄外阴影：
box-shadow: 0 1px 3px rgba(0,0,0,0.2)，比常态值更小、更锐 - 取消或弱化 inset 阴影，比如把
inset 0 1px 0 #eee改成inset 0 0 0 #eee，模拟受压后高光压缩 - 别忘了加
transition：至少包含transform和box-shadow，时长控制在0.15s–0.2s，太慢像卡顿，太快像没反应
圆角 + 边框 + 文字阴影的协同细节
立体感藏在边缘处理里，不是中心渐变决定一切：
-
border-radius别设死值，推荐用6px或8px（12px以上易显臃肿） - 完全去掉
border（border: none）反而削弱结构感；可用border: 1px solid rgba(255,255,255,0.3)模拟高光边线 -
text-shadow: 0 1px 0 #fff能让文字“浮”在按钮表面，但深色背景上要换为0 -1px 0 #000 - 避免给按钮设固定
width/height，优先用padding控制尺寸，保证文字增减时自动适配
最容易被忽略的是：所有阴影和渐变的色值必须统一明度层级。比如你用 #4a90e2 作主色，那么它的高光应是加白（#a0c8ff），暗部应是加黑（#2a60a2），而不是随手挑个对比色——色系断裂会让立体感瞬间崩塌。
