Bootstrap中.input-group无法直接添加阴影，因其flex布局和渲染层级导致阴影被裁剪或遮挡；正确做法是用position-relative外层包裹并留白，再施加阴影。
Bootstrap 本身不提供“带阴影的输入框组”开箱即用的类，.input-group 默认无阴影，且 shadow-* 工具类直接加在 .input-group 上会被内部元素裁剪或层级遮挡——不是写错了，是结构和渲染规则导致的。
为什么直接加 shadow-sm 到 input-group 没反应
常见现象：给 <div class="input-group shadow-sm"> 加阴影，预览里看不见，或者只在部分边缘露一点。根本原因是：.input-group 默认是 display: flex，其子元素（.input-group-text、.form-control）会撑满容器，而 box-shadow 是绘制在元素 *外侧* 的，一旦父容器没留出足够“呼吸空间”，阴影就被兄弟元素盖住或被自身 overflow 隐形裁剪。
-
.input-group没设position: relative，导致阴影层叠顺序低 - 子元素如
.form-control或.input-group-text有背景色或边框，视觉上“吃掉”了阴影区域 - 移动端小屏下，
.input-group宽度压缩后，shadow-lg的模糊半径超出可用空间，直接被截断
正确做法：外层包裹 + 留白 + 精确控制阴影层级
必须拆开结构：阴影由外层容器承担，.input-group 专注布局，两者职责分离。
- 外层用
<div class="position-relative z-1">包裹整个.input-group，再加shadow-sm或自定义box-shadow - 给外层加
p-1或px-2（至少0.25rem水平内边距），为阴影留出绘制空间 - 避免对
.input-group-text单独设background-color——它默认是#e9ecef，太亮会削弱阴影对比；可改用bg-white或透明背景 - 如果用了
.form-control:focus，确保它的z-index不高于外层，否则聚焦时阴影被控件盖住
示例结构：
<div class="position-relative z-1 p-1 shadow-sm">
<div class="input-group">
<span class="input-group-text bg-white border-end-0">@</span>
<input type="text" class="form-control border-start-0">
</div>
</div>响应式阴影适配要点
小屏下阴影不能照搬桌面参数，否则会糊成一块灰团，或挤压输入框可点击区域。
- 大屏用
box-shadow: 0 1px 3px rgba(0,0,0,0.08)，小屏（@media (max-width: 768px)）降为0 1px 2px rgba(0,0,0,0.05) - 别依赖
shadow-lg做响应式切换——它只是固定值，无法随断点变化；改用自定义 CSS 类配合媒体查询 - 如果输入框组放在
.modal-body或.card-body内，外层容器需额外加z-index: 2，否则模态框遮罩层会盖住阴影 - 深色模式下，
rgba(0,0,0,0.05)在暗背景上几乎不可见，得用@media (prefers-color-scheme: dark) { .input-group-shadow { box-shadow: 0 1px 3px rgba(255,255,255,0.06); } }
focus 状态与阴影联动容易踩的坑
想让输入框获得焦点时阴影加深？别直接写 .input-group:focus-within .input-group-shadow——:focus-within 在 Safari 旧版支持差，且 .input-group 本身不触发 focus。
- 真正有效的选择器是：
.input-group-shadow .form-control:focus ~ .input-group-shadow不成立，得靠 JS 监听或用:has()（但兼容性有限） - 更稳妥的做法：给外层加 class
input-group-focused，用 JS 切换：document.querySelector('.form-control').addEventListener('focus', () => el.classList.add('focused')) - 若用 Bootstrap 的
--bs-form-control-focus-box-shadow变量，它只影响控件自身，不影响外层阴影——这是两个独立渲染层，别指望变量自动传导 - 移动端点击后阴影闪一下就消失？那是
:active瞬时状态，必须配合transition: box-shadow 0.15s和outline: none才能稳定呈现
真正难的不是加那几行 CSS，而是确认阴影绘制区域没被任何父级 overflow: hidden 截断，也没被兄弟元素的 z-index 压住——真机调试时，打开开发者工具的「Layers」面板，一眼就能看出阴影是否在正确图层上。
