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