按钮响应式阴影需自定义CSS类配合媒体查询实现，小屏无阴影、中屏轻阴影、大屏重阴影，须避开Bootstrap原生shadow类冲突，严格对齐断点值并兼顾性能与可访问性。
按钮阴影的响应式控制依赖 CSS 媒体查询，Bootstrap 本身不提供 btn-shadow-sm / btn-shadow-lg 这类响应式阴影工具类
Bootstrap 5+ 的 shadow 工具类（如 shadow-sm、shadow、shadow-lg）是静态的，不会随屏幕尺寸自动切换。想实现“小屏无阴影、中屏轻阴影、大屏重阴影”，必须手动扩展 CSS。
用自定义 CSS 类配合媒体查询控制不同断点下的 box-shadow
直接在 <style> 或自定义 SCSS 中写响应式规则，比覆盖 Bootstrap 默认更可控。注意：Bootstrap 的断点变量（如 sm、md）需对应其实际像素值（576px、768px 等），避免用错边界。
- 小屏（
xs）移除阴影：@media (max-width: 575.98px) { .btn-responsive-shadow { box-shadow: none; } } - 中屏（
sm–md）加轻阴影：@media (min-width: 576px) and (max-width: 991.98px) { .btn-responsive-shadow { box-shadow: 0 1px 2px rgba(0,0,0,.1); } } - 大屏（
lg及以上）用重阴影：@media (min-width: 992px) { .btn-responsive-shadow { box-shadow: 0 4px 12px rgba(0,0,0,.2); } } - 若使用 SCSS，可复用 Bootstrap 的
$spacers和$shadow变量，保持风格一致
避免用 !important 覆盖 Bootstrap 的 shadow 类
直接给按钮同时加 shadow-lg 和自定义响应式类，会导致冲突——因为 Bootstrap 的 shadow-lg 在所有断点都生效，且优先级可能更高。正确做法是：只用自定义类，彻底绕开原生 shadow 工具类。
- ❌ 错误写法：
<button class="btn shadow-lg btn-responsive-shadow">（两个类共存，易被覆盖） - ✅ 正确写法：
<button class="btn btn-responsive-shadow">（仅用自定义类） - 检查浏览器开发者工具中的 computed styles，确认
box-shadow值是否按断点正确切换 - 移动端真机测试很重要：某些安卓 WebView 对
box-shadow渲染有延迟或模糊问题
阴影深度变化对性能和可访问性的影响不能忽略
频繁切换 box-shadow 不会引发重排（reflow），但重绘（repaint）仍存在；尤其在滚动容器中大量使用，可能影响低端设备帧率。另外，纯靠阴影区分状态会伤害色觉障碍用户。
- 阴影不是交互反馈的唯一手段：建议搭配
:focus-visible、:active的边框或背景色变化 - 深阴影在暗色模式下可能失效——若项目支持暗色主题，需额外为
.dark .btn-responsive-shadow定义适配的box-shadow值 - 不要依赖阴影传递关键信息（比如“禁用”状态），始终用
disabled属性 +opacity或cursor: not-allowed
768px 写成 767px），导致中屏没触发。 
