直接在 button 元素上使用 box-shadow 即可生效，无需额外包裹；需注意 overflow 裁剪、hover 过渡优化、disabled 态阴影弱化及深色模式下浅色阴影适配。
button 元素直接用 box-shadow 就行
HTML 按钮（<button>）是常规块级可替换元素，支持所有标准盒模型样式，box-shadow 完全可用，不需要额外 wrapper 或伪元素。常见错误是误以为按钮有“内置样式干扰”而绕路加 <div> 包裹——纯属多余。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接在
button的 CSS 中写box-shadow: 0 2px 4px rgba(0,0,0,0.2);即可生效 - 若阴影不显示，请检查是否被父容器的
overflow: hidden裁剪（尤其是带圆角的卡片内） - 避免对
:active状态只改transform却忽略阴影缩放，视觉会断层；建议同步调小box-shadow的模糊半径和偏移
hover 时增强阴影要配 transition
单纯加 box-shadow 在 :hover 里会导致突兀跳变。必须搭配 transition 才自然。注意：不能只写 transition: all .2s，否则会过渡所有属性（比如 background-color 变化也会拖慢），影响性能感知。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只过渡阴影相关属性：
transition: box-shadow 0.2s ease, transform 0.2s ease; - 推荐 hover 效果组合：
transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); - 移动端慎用
transform: translateY()，部分 iOS Safari 在 fixed 容器中会触发渲染异常；可改用top: -2px+position: relative
禁用状态（disabled）的阴影要弱化
button:disabled 默认灰度且无交互反馈，但很多人忘了同步降低阴影强度，导致视觉上“浮得比正常态还高”，违背禁用逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用时设为
box-shadow: 0 1px 2px rgba(0,0,0,0.08);（比默认态更浅、更近） - 别用
opacity: 0.6覆盖整个按钮——它会让阴影也变透明，层次感丢失；应单独控制box-shadow和color - 如果用了 CSS 自定义属性（如
--shadow-active），记得在:disabled中重设变量值，而非依赖继承
深色模式下阴影颜色容易发灰
用 rgba(0,0,0,0.2) 在深色背景上会显得浑浊甚至看不见。不是阴影“失效”，而是黑底+黑影对比度不足。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 深色模式下改用浅色阴影：
box-shadow: 0 2px 4px rgba(255,255,255,0.1); - 用
@media (prefers-color-scheme: dark)包裹，或通过color-scheme: light dark触发浏览器自动适配（但阴影仍需手动写） - 避免使用
hsl()动态计算阴影色——目前主流浏览器不支持在box-shadow中响应式计算 hsl 颜色通道
