form-control 加 shadow 类没效果是因为其默认 border 和 background-color 弱化阴影，且 input-group 会重置子元素的 box-shadow；应将 shadow 类加在 input-group 容器上，并配合 border-0、bg-white 和 rounded-3 使用。
为什么 form-control 加 shadow 类没效果？
因为 bootstrap 默认的 form-control 有 border 和 background-color，而 shadow 类（如 shadow-sm）的 box-shadow 在默认背景和边框下视觉上被弱化甚至不可见。更关键的是：**搜索框组（input-group）本身会重置子元素的 border-radius 和 box-shadow 行为**。
实操建议：
- 别直接给
form-control加shadow类，而是给整个input-group容器加 - 必须配合
border-0和bg-white（或透明背景）才能让阴影清晰可见 - 若用
input-group-text，它默认带边框，会破坏阴影连续性，需统一处理
如何用 input-group 实现真正响应式阴影搜索框
核心是把阴影、圆角、响应式断点控制都集中在 input-group 这一层，而非内部 input 或 button。
示例结构（Bootstrap 5.3+）：
<div class="input-group shadow-sm rounded-3 border-0 bg-white"> <span class="input-group-text bg-transparent border-0 ps-3"><i class="bi bi-search"></i></span> <input type="text" class="form-control border-0 shadow-none py-2 px-3" placeholder="搜索..."><button class="btn btn-outline-secondary border-0 rounded-end">搜索</button> </div>
要点说明：
-
shadow-sm必须加在input-group外层 div 上，不是form-control -
rounded-3控制整体圆角，避免input-group-text和form-control圆角不一致导致阴影断裂 -
border-0清除所有内部边框，否则阴影会被遮挡或显得突兀 - 移动端小屏时，
input-group默认会堆叠按钮，若要保持横排，加flex-nowrap并配合flex-sm-wrap控制断点
shadow 类在不同设备上的表现差异
Bootstrap 的 shadow 类（shadow-sm/shadow/shadow-lg）是纯 CSS box-shadow，**不随屏幕尺寸自动缩放**。这意味着在高 DPI 移动屏上，shadow-sm 可能看起来比桌面端更“重”。
解决办法：
- 用媒体查询覆盖：比如
@media (max-width: 576px) { .input-group.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.1); } } - 避免在
input-group上用shadow-lg—— 它在手机上极易造成视觉过载 - 如果搭配深色主题（
bg-dark），需手动调暗box-shadow颜色，否则阴影会发灰
为什么加了 shadow 后点击区域变小？
常见现象：点击搜索框边缘没反应，或者按钮点击热区缩小。这是因为 box-shadow 不增加可点击区域，而 input-group 的 padding 被内部元素的 border 或 margin 挤占了。
排查与修复：
- 检查是否误用了
py-2等垂直内边距类 ——input-group内部已有默认 padding，重复添加会导致内容挤压 - 确认
form-control没设height固定值，否则会截断阴影区域 - 若用图标字体（如 Bootstrap Icons），确保
i标签没设line-height: 1导致垂直居中失效，从而压缩可点击高度
最稳妥的做法：用浏览器开发者工具选中 input-group，看 computed styles 中 box-shadow 是否渲染，再检查 padding 和 height 是否被意外覆盖。
