box-shadow: inset 在 .d-flex 或 .d-inline-flex 容器上不显示，根本原因是弹性容器高度塌陷、无明确绘制边界；需通过设 background-color、min-height 或 height: fit-content 等方式使其“显形”，再配置正确 inset 参数。
直接给 .d-flex 或 .d-inline-flex 容器加 box-shadow: inset 通常无效——不是语法错，而是弹性容器默认没有“可投影的盒边界”，常见于高度塌陷、无背景、或子项撑不满时。
为什么 inset 阴影在 flex 容器上不显示
内阴影必须作用在有明确尺寸和绘制边界的元素上。flex 容器（尤其是 display: flex）若内部子项未设高度、或全是浮动/绝对定位，其计算高度可能为 0；此时 box-shadow: inset 没有“落点”，自然不可见。
- 检查 computed height：在 DevTools 中看该 flex 元素的
height是否为auto且实际值为0px - 确认没意外触发
overflow: hidden（比如父级有.card或自定义类），它会裁掉所有 inset 阴影 - 避免对
.row这类 Bootstrap 内置 flex 容器直接加 inset——它带负 margin，阴影易被外层截断
让 flex 容器“显形”才能投内影
必须让它具备可渲染的盒模型。这不是 hack，而是 CSS 盒模型的基本前提。
- 加
background-color: transparent或border: 1px solid transparent——强制浏览器分配绘制区域 - 若子项是浮动布局（已不推荐），务必在 flex 容器末尾加
class="clearfix"，否则高度塌陷 - 更稳妥：显式设
min-height: 1px或height: fit-content（注意 IE 不支持后者） - 不要依赖
padding“撑开”容器来显示 inset——padding 是内容区，inset 阴影作用于 border box，两者逻辑不同
box-shadow: inset 的参数陷阱
漏写 inset、偏移值反向、或模糊值过大，都会让效果失真甚至完全不可见。
-
inset必须放在最前：box-shadow: inset 0 2px 6px rgba(0,0,0,0.08)，写成0 2px 6px inset ...会变成外阴影 - 垂直偏移建议用正值（如
2px）实现“底部内凹”感；负值（-2px）容易让顶部阴影被裁或视觉漂浮 - 模糊值别超
8px：flex 容器通常较紧凑，大 blur 会让阴影糊成一片，尤其在小屏上侵占内容空间 - 避免设
spread（第四个值）：flex 容器内边距不均，负 spread 易导致左右硬边，正 spread 则让阴影“胀出”边界
响应式内阴影要避开 xs 断点
移动端窄屏下，inset 阴影的视觉干扰远大于装饰价值，且易与触摸反馈冲突。
- Bootstrap 的
xs断点（max-width: 575.98px）下建议禁用内阴影：@media (max-width: 575.98px) { .flex-with-inset { box-shadow: none; } } - 桌面端可稍增强：例如
@media (min-width: 992px) { .flex-with-inset { box-shadow: inset 0 4px 12px rgba(0,0,0,0.1); } } - 若容器有
border-radius，确保blur≤ 圆角值（如rounded-2对应0.5rem），否则阴影边缘会断裂生硬
真正卡住的往往不是 inset 语法，而是 flex 容器是否“有形”——先解决高度和边界问题，再调参数。很多项目里，加一行 background-color: #fff 就让内阴影突然出现，就是因为此前它根本没被渲染出来。
