Bootstrap 5 表单聚焦阴影需完整重写两层 box-shadow 并适配深色模式：主色高亮层与透明补偿层缺一不可；容器阴影须自定义类并加 padding；悬停需显式声明 transition；深色模式须用 CSS 变量配合 @media 和 [data-bs-theme="dark"] 双路径适配。
表单输入框:focus时默认就有阴影，但只改颜色容易出错
Bootstrap 5 的 .form-control 在聚焦时自带两层 box-shadow：一层是主色高亮（如 rgba(13, 110, 253, 0.25)），另一层是透明补偿（0 0 0 0.25rem transparent）。后者不是摆设——它用来抵消 border-width: 0.25rem 带来的视觉突兀。如果只覆盖第一层、漏掉第二层，聚焦时会看到边框“变粗”或阴影错位。
实操建议：
- 必须完整重写两层，例如：
box-shadow: 0 0 0 0.25rem rgba(255, 99, 132, 0.25), 0 0 0 0.25rem transparent; - 确保自定义 CSS 在 Bootstrap CSS 之后加载，不用
!important - 别只改颜色值而动偏移/扩散参数，否则和 border 不对齐
- 检查 DevTools 的 Computed 标签页，确认
box-shadow没被划掉；若被划掉，点开来源看哪条规则赢了
想给整个表单容器加阴影，别用 shadow-类直接套
shadow-sm、shadow-lg 这类工具类只对块级元素生效，且默认用 rgba(0,0,0,.075)，硬套在 <form> 上常没反应——因为 <form> 默认是 block，但可能被父容器 overflow: hidden 裁剪，或自身没内边距/内容撑开高度。
更可靠的做法是自己写一个类：
.form-container-shadow {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
padding: 1.5rem;
border-radius: 0.375rem;
}
注意：
- 加
padding是为了确保阴影有渲染空间，空<form>不画阴影 - 避免用
shadow-lg套容器——它的模糊值（3rem）在表单上易显浮夸，尤其移动端 - 深色背景下，把 alpha 从
0.08往下调（比如0.04），否则发灰
悬停时让表单区域有阴影变化，transition不能少
只写 form:hover { box-shadow: ... } 是不够的。Bootstrap 默认没给 <form> 设 transition，结果就是阴影“啪”一下跳出来，或者在 Safari 里干脆不触发。
正确写法分两步：
- 先在常态规则里声明过渡：
form { transition: box-shadow 0.2s ease-in-out; } - 再写悬停效果：
form:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.12); } - 别用
transition: all，否则 label 或 button 的颜色变化也会动，干扰焦点识别 - 移动端真机不响应
:hover，如需交互提示，得加tabindex="0"并补form:focus规则
深色模式下表单阴影几乎看不见，必须手动适配
Bootstrap 所有 shadow 类和 .form-control:focus 都用 rgba(0,0,0,...)，在黑底上透明度不变的话，阴影就变成一块糊糊的灰，失去立体感。
推荐用 CSS 自定义属性解耦：
.form-control:focus {
--bs-shadow-color: rgba(13, 110, 253, 0.25);
box-shadow: 0 0 0 0.25rem var(--bs-shadow-color), 0 0 0 0.25rem transparent;
}
@media (prefers-color-scheme: dark) {
.form-control:focus {
--bs-shadow-color: rgba(106, 76, 147, 0.3);
}
}
[data-bs-theme="dark"] .form-control:focus {
--bs-shadow-color: rgba(106, 76, 147, 0.3);
}
关键点：
- 仅靠
@media (prefers-color-scheme: dark)不够，部分安卓 WebView 和旧 Safari 不支持，[data-bs-theme="dark"]是 Bootstrap 官方兜底路径 - 深色模式下别盲目提高 alpha 值，
0.3已足够，再高反而像脏污 - 别试图用 Sass 变量自动替换——CSS 变量才是运行时可切换的唯一可靠方式
overflow、display、height 和加载顺序，比反复调参数有用得多。 
