盒模型阴影被裁切主因是父容器overflow非visible，需检查并修改overflow属性或调整布局；可改用outline、内阴影或伪元素模拟阴影。
盒模型中阴影被裁切，通常不是因为
本身有问题，而是父容器设置了
（或
、
），导致超出边界的阴影被剪掉。即使子元素自身
，也无法突破父级的裁剪限制。
检查并修改父容器的
overflow
属性
阴影属于元素的“绘制层”，但渲染时受其最近的**块级格式化上下文（BFC）容器**约束。只要该容器设置了
且值不为
，就会裁剪所有溢出内容（包括阴影）。
找到阴影元素的直接父容器或向上逐级检查，定位到第一个设置了
的祖先元素
若该容器逻辑上不需要裁剪（比如只是用于布局包裹），直接改为
若必须保留裁剪（如卡片滚动区域），可考虑将带阴影的元素移出该容器，用定位（
）或 flex/grid 的 order/align 方式重新布局
避免意外触发 BFC 导致裁剪
某些 CSS 属性（如
、
、
）会创建新的 BFC，而部分
浏览器
对 BFC 边界处理较严格，可能间接影响阴影渲染边界。
慎用
仅为了
清除浮动
——改用
或
伪元素
清除更安全
确认没有无意中给父容器加了
、
或
（某些 transform 会隐式创建包含块，影响阴影绘制范围）
用 outline 或 border 模拟阴影（临时替代方案）
当无法修改父容器样式（如第三方组件库限制），又必须视觉上有“外发光”效果时，可用非裁剪属性模拟：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
—— outline 不参与盒模型，也不受 overflow 影响，但只能是矩形且无法设模糊
—— 利用内阴影+透明边框制造类似效果
对关键元素加
+
，配合伪元素
绘制
绝对定位
的模糊背景层（需手动控制尺寸和偏移）
基本上就这些。核心记住：box-shadow 不是“浮在页面上”的独立图层，它依附于元素的渲染盒子，而这个盒子的可见范围，由最近的、有裁剪能力的祖先说了算。
box-shadowoverflow: hiddenautoscrolloverflow: visibleoverflowvisibleoverflow: hidden|auto|scrolloverflow: visibleposition: absolutefloatdisplay: flow-rootcontain: layoutoverflow: hiddendisplay: flow-rootclip-pathmasktransformoutline: 2px solid rgba(0,0,0,0.2)border: 4px solid transparent; box-shadow: inset 0 0 0 4px rgba(0,0,0,0.1)position: relativez-index::after