用box-shadow可直接实现按钮阴影，关键在偏移、模糊与透明度配合：button{box-shadow:0 2px 6px rgba(0,0,0,0.15);}，悬停需加transition，按压用inset增强反馈，深色背景调浅色内阴影。
直接用 box-shadow 就能做出按钮阴影，不需要图片、SVG 或 JS —— 但参数调错会导致阴影“浮得假”或“沉得没存在感”，关键在偏移、模糊和颜色透明度的配合。
button 元素上直接写 box-shadow 的写法
别套 class 或 wrapper，<button> 自身支持所有 CSS 盒模型属性。直接在 button 选择器里加 box-shadow 最干净：
button {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
这个值表示：垂直向下偏移 2px、模糊半径 6px、半透黑影 —— 是多数 UI 设计中“轻微抬升”的标准手感。
- 水平偏移设为
0更稳，避免按钮看起来被“推歪” - 垂直偏移用正数（如
2px）模拟光源在上方，符合直觉 - 模糊半径超过
8px容易让按钮边缘发虚，移动端尤其明显 - 透明度别低于
0.1，否则阴影太淡失去立体感；别高于0.3，否则像蒙了层灰
悬停时增强阴影的常见错误
很多人写 button:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }，结果点击时阴影“跳变”明显，体验割裂。
立即学习“前端免费学习笔记（深入）”；
- 必须给 button 加
transition: box-shadow 0.2s ease;，否则阴影突变 - 悬停前后两个
box-shadow值的参数类型要一致（比如都用rgba，别一个用#000一个用rgba） - 扩散半径（第四个值）慎用：设为正数会撑大按钮视觉尺寸，设为负数又容易裁掉圆角
- 如果按钮有
border-radius，阴影会自动贴合弧度 —— 但border-radius太小（如2px）时，阴影边缘仍显生硬
内阴影（inset）在按钮上的真实用途
inset 不是“凹下去”的装饰，而是用来强化按压反馈。纯外阴影 + 按下位移（transform: translateY(1px)）还不够，加一点内阴影才像真被按进去了。
button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
transform: translateY(1px);
}
-
inset的模糊半径建议 ≤3px，太大就糊成一团，看不出“压入感” - 垂直偏移用
1px配合transform: translateY(1px)，形成视觉一致性 - 别在
:hover里加inset—— 用户只是悬停，还没按，加了反而干扰预期 - 深色背景上用
inset要调浅色阴影（如rgba(255, 255, 255, 0.1)），否则看不见
真正难的不是写出阴影，而是让阴影在不同设备像素比、不同背景色、不同按钮尺寸下都保持“可信的物理感”——多试几次 0 1px 2px 和 0 2px 4px 的组合，比查文档管用。
