最直接方法是用box-shadow属性为button元素添加阴影，必须至少指定水平偏移、垂直偏移和颜色（如box-shadow: 0 4px 8px rgba(0,0,0,0.15)），并配合transition实现悬停加深效果，避免内联样式和默认边框干扰。
用 CSS box-shadow 给按钮加阴影最直接
HTML 里按钮本身不带阴影，得靠 CSS 控制。核心就是 box-shadow 属性，它能给任意块级元素（包括 <button></button>）添加投影效果。别用图片或伪元素模拟——既增加体积又难调整。
常见错误是只写两个值（比如 box-shadow: 2px 2px;），结果阴影不显示：因为缺少颜色和模糊半径，浏览器会忽略。必须至少指定偏移量 + 颜色，推荐写全四个值：水平偏移、垂直偏移、模糊半径、颜色。
示例写法：
<button class="shadow-btn">点击我</button>
<style>
.shadow-btn {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
</style>
其中 rgba(0, 0, 0, 0.15) 比纯黑更自然，避免生硬；8px 模糊值太小显锋利，太大又发虚，4–12px 是常用区间。
按钮悬停时加深阴影要加 :hover 状态
单纯静态阴影不够交互感，用户点击前需要视觉反馈。不能只改 box-shadow，否则可能因重绘导致卡顿——得配合 transition 平滑过渡。
-
transition必须写在默认状态（非:hover），否则首次悬停无动画 - 只对
box-shadow做过渡，别写all，避免意外触发其他属性变化 - 阴影加深建议加大模糊半径或偏移量，而不是只调颜色透明度——后者容易显得“脏”
正确写法：
.shadow-btn {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease;
}
.shadow-btn:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
内联样式写 box-shadow 不推荐
虽然 <button style="box-shadow: ..."></button> 能立刻生效，但后续维护成本高：
- 多个按钮要改阴影？得逐个找
style属性替换 - 暗色模式适配几乎不可能——CSS 变量或媒体查询进不了内联样式
- 无法复用，比如想让按钮和卡片共享同一套阴影层级体系
真要快速验证效果，可以临时用浏览器开发者工具编辑 element.style，但上线前务必抽到 <style></style> 或外部 CSS 文件中。
移动端点击阴影跳动？检查是否漏了 border: none
部分安卓 WebView 或旧版 Safari 在按钮获得焦点时，会默认加一层蓝色外框（outline）或边框，和 box-shadow 叠加后产生错位感，看起来像“跳动”。这不是阴影问题，而是按钮默认样式干扰。
解决方式很简单，在按钮基础样式里加上：
.shadow-btn {
border: none;
outline: none;
}
如果业务需要保留键盘可访问性，outline 别直接设为 none，改用 outline: 2px solid transparent; 配合 :focus-visible 单独增强。
阴影不是越重越好，关键看层级关系：主操作按钮可以深一点，次要按钮浅些，禁用状态去掉阴影。很多人调完一个按钮就停了，其实整页按钮的阴影数值最好统一管理，比如用 CSS 自定义属性定义 --shadow-sm、--shadow-md，不然后期视觉会越来越散。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
