按钮组阴影需加在外层容器而非.btn-group或.btn上，因其默认overflow:hidden会裁剪阴影，且按钮紧邻导致阴影断裂；应使用带padding和overflow:visible的外层容器，并可自定义.shadow-bottom实现单向投影。
按钮组本身不支持 box-shadow，得改 .btn-group 容器
Bootstrap 的 .btn-group 默认是纯色背景、无边框阴影的 flex 容器，它不会继承子按钮的 box-shadow，也不会主动加阴影。直接给 .btn 加阴影，阴影会被父容器裁剪或视觉上断裂——因为按钮紧挨着，阴影重叠、边缘生硬。
正确做法是把阴影加在包裹整个按钮组的外层容器上，同时确保该容器有足够内边距（padding）和非透明背景（哪怕只是 background: transparent），避免裁剪。
- 不要写：
<div class="btn-group"><button class="btn btn-primary shadow">A</button><button class="btn btn-secondary shadow">B</button></div>（阴影被裁、不连贯） - 应该写：
<div class="d-inline-flex p-2 bg-white rounded shadow-sm"><div class="btn-group">...</div></div> - 如果用
shadow工具类（如shadow、shadow-md），必须确保父容器有overflow: visible（默认就是），且没设overflow: hidden
shadow-* 类在按钮组里容易失效的三个原因
Bootstrap 5+ 的 shadow 工具类本质是 box-shadow CSS 声明，但它在按钮组中常“看不见”，不是类没生效，而是被布局细节吃掉了。
-
.btn-group默认overflow: hidden—— Bootstrap 4.6+ 和 5.x 都有这行，会直接剪掉子元素溢出的阴影，必须在外层覆盖：加overflow: visible或换容器 - 按钮之间
margin: 0+border-radius拼接，导致阴影在接缝处断裂；解决方法是给外层留白（p-1或ps-2 pe-2），别让阴影贴边 - 深色主题下
shadow的默认灰度（rgba(0,0,0,0.2)）对比度低，看起来像没影子；可自定义 CSS 覆盖--bs-box-shadow变量，或手动写box-shadow: 0 2px 8px rgba(0,0,0,0.15)
想让阴影只出现在按钮组「下方」，而不是四周？用自定义 class 更稳
Bootstrap 内置的 shadow 全向发散，但设计稿常要求仅底部投影（模拟悬浮感）。这时依赖工具类反而绕路，直接写一行 CSS 更可控、更轻量。
- 加个类名，比如
shadow-bottom： - CSS 定义：
.shadow-bottom { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } - 用法：
<div class="d-inline-flex shadow-bottom bg-white rounded"><div class="btn-group">...</div></div> - 注意：别用
rounded-0或rounded-top破坏圆角一致性，阴影会从直角边缘漏出，显得突兀
移动端点击区域变小？阴影本身不占交互，但容器 padding 影响可点范围
加了外层容器和 p-2 后，按钮组整体尺寸变大，但用户手指点的是按钮本身，不是阴影区域。真正影响触控体验的是容器内边距是否挤压了按钮的点击热区。
- 按钮默认有
padding和border，只要外层p-2不缩小按钮尺寸（比如没用max-width或flex-shrink: 1），就没事 - 警惕用
btn-group-sm+ 外层p-1组合：小按钮本身热区就窄，再缩内边距，iOS 上容易误点失败 - 测试建议：真机打开 DevTools 的「Toggle device toolbar」，用指针模拟点击，看高亮区域是否完整覆盖按钮
阴影不是加在按钮上，是加在“装按钮的那个盒子”上；这个盒子有没有留够呼吸空间、会不会裁剪内容、在深色背景里显不显——这些比选哪个 shadow-md 类重要得多。
