Bootstrap中如何实现带阴影的按钮组

按钮组阴影需加在外层容器而非.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 类重要得多。