因为.col-*类默认无背景色且高度由子元素撑开，inset阴影只在自身背景区域内渲染；若无background-color、height或padding，阴影不可见，且父容器overflow:hidden会裁剪它。
为什么直接写 box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) 在 Bootstrap 列上没效果？
因为 Bootstrap 的 .col-* 类默认不设 background-color，且多数情况下内容高度由子元素撑开——而 inset 阴影只在元素自身背景区域（含 padding）内渲染。若列无背景、无显式 height 或 padding，阴影就“看不见”。更隐蔽的是：如果列内部有 margin-top 负值（比如某些卡片布局），还可能把阴影裁掉。
- 先给列加
background-color: #fff（或透明度可控的色值） - 确保列有可渲染的 padding（哪怕
padding: 1px），否则 inset 阴影可能被压缩到不可见 - 避免父容器设置
overflow: hidden，否则阴影会被裁剪
如何让 inset 阴影适配 Bootstrap 栅格的响应式行为？
别用固定像素值硬写 box-shadow。Bootstrap 列宽度随断点变化，但阴影参数是静态的——这意味着小屏下阴影可能显得过重，大屏下又太淡。推荐用 CSS 自定义属性配合媒体查询动态调整：
:root {
--inset-blur: 4px;
--inset-spread: 2px;
}
<p>@media (max-width: 768px) {
:root { --inset-blur: 2px; --inset-spread: 1px; }
}</p><p>.my-col-with-inset {
background-color: #f8f9fa;
padding: 0.5rem;
box-shadow: inset 0 var(--inset-spread) var(--inset-blur) rgba(0,0,0,0.08);
}
这样既保持语义清晰，又避免为每个断点重复写整条 box-shadow 声明。
使用 inset 时和 Bootstrap 边框类（如 .border）冲突怎么办？
Bootstrap 的 .border 类会添加 border: 1px solid #dee2e6，而 inset 阴影默认从 border 内侧开始绘制——结果就是阴影紧贴边框，视觉上像“压扁了”。要让阴影有呼吸感，必须显式控制 border 和 shadow 的层级关系：
立即学习“前端免费学习笔记（深入）”；
- 移除
.border，改用outline: 1px solid #dee2e6（outline 不占布局空间，阴影能完整显示） - 或保留 border，但加大
box-shadow的 spread 值（如inset 0 0 0 2px rgba(0,0,0,0.05)），让阴影“顶”出边框内侧 - 切忌同时用
border-radius和inset阴影却不设overflow: hidden——圆角区域的阴影会溢出
移动端 Safari 上 inset 阴影偶尔闪烁或消失？
这是 WebKit 旧版渲染器对 inset 阴影 + 透明背景 + 硬件加速组合的已知问题。最稳的解法是强制触发合成层，但不用 transform: translateZ(0)（它可能引发其他重绘问题），而是加一行：
.my-col-with-inset {
will-change: box-shadow;
/* 其他样式... */
}
注意：will-change 只应在真正需要优化的元素上使用，不要全局加。如果列内容频繁变动（比如加载中状态切换），这行能显著减少 Safari 下的闪烁；如果只是静态展示，其实可以省略。
真正麻烦的是嵌套在 .row 里的 .col 还用了 flex 布局——此时 inset 阴影可能受 flex item 最小尺寸约束影响，需要额外加 min-width: 0 来释放收缩限制。
