box-shadow 在 bootstrap 容器上无效，首要原因是容器高度塌陷；需确保容器“有形”，如加 background-color、border 或 clearfix，避免浮动导致高度为 0，再正确设置 inset 内阴影参数。
box-shadow 在 Bootstrap 容器上直接加无效？先检查容器是否“有形”
Bootstrap 的 .container 和 .container-fluid 默认是 display: block，但本身没有背景色、边框或固定高度，如果内部内容塌陷（比如只有浮动子元素），容器实际高度可能为 0。此时加 box-shadow 看不见——阴影是作用在元素自身的“盒边界”上的，不是内容周围。
实操建议：
- 给容器加
background-color: white或border: 1px solid transparent，强制它“显形” - 确认子元素未全部浮动；若用了
float，记得在容器末尾加clearfix类（Bootstrap 4/5 中为class="clearfix"）或用overflow: hidden - 避免对
.row直接加阴影——它默认margin-left/right: -15px，会把阴影裁掉；应加在包裹它的.container或自定义 wrapper 上
正确写法：box-shadow 值顺序与常见内阴影参数
内阴影靠 inset 关键字触发，漏掉就变成外阴影。标准语法是：box-shadow: [inset] h-offset v-offset blur spread color。用于容器时，常需控制模糊半径和偏移，避免阴影“糊”到文字上。
推荐基础内阴影写法（适配大多数浅色背景容器）：
.container-with-inset {
box-shadow: inset 0 2px 8px rgba(0,0,0,0.08);
}
说明：
-
inset必须写在最前，否则无效 -
0 2px表示垂直向下偏移 2px，水平不偏移，让阴影集中在底部内侧 -
8px模糊值不宜过大（>12px 容易发虚），rgba(0,0,0,0.08)保证柔和不突兀 - 不要设
spread（第四个值）为负数——虽能收窄阴影，但容易导致顶部/左右出现意外硬边
响应式内阴影：在不同断点下动态调整
移动端屏幕窄，大模糊值的内阴影会侵占内容空间，显得拥挤；桌面端则可稍强些。Bootstrap 的断点类（如 md、lg）不能直接控制 box-shadow，得靠媒体查询。
实操建议（以 Bootstrap 5 为例）：
- 用
@media (min-width: 768px)覆盖移动端默认值 - 桌面端加大
v-offset和blur，例如：inset 0 4px 12px rgba(0,0,0,0.1) - 避免在
xs下使用内阴影——小屏下视觉权重本就高，加阴影反而干扰信息层级 - 若容器带圆角（
border-radius），确保box-shadow的模糊值 ≤ 圆角值，否则阴影边缘会生硬断裂
和 Bootstrap 边框/轮廓类共存时的冲突点
如果你同时用了 .border、.rounded 或焦点状态类（如 :focus-visible 触发的 outline），box-shadow 可能被覆盖或表现异常。
关键注意：
-
box-shadow层级高于border，但低于outline；若要让内阴影在聚焦时仍可见，得重置outline: none并改用box-shadow模拟焦点环 -
.border-0不影响box-shadow，但.shadow-sm等内置阴影类会覆盖你的自定义值——务必删掉这些类，纯手工控制 - 深色模式下，
rgba(0,0,0,0.08)可能不够明显，建议配合@media (prefers-color-scheme: dark)改用rgba(255,255,255,0.1)
内阴影真正生效的前提，从来不是属性写对了，而是容器盒子真实存在且尺寸稳定——这点比背熟 box-shadow 参数重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
