overflow: hidden 会裁剪元素的绘制边界，导致 box-shadow 被截断；可通过 padding + background-clip 或伪元素方案解决，关键需同步 border-radius、确保 inset/ padding 足够、避免 transform 干扰。
为什么 overflow: hidden 会让 box-shadow 消失？
因为 overflow: hidden 不仅裁剪内容，也裁剪元素自身的 **绘制边界（painting area）**——而 box-shadow 默认属于该边界外的渲染层。即使阴影是元素的“装饰”，它仍受父容器或自身 overflow 的剪裁限制。
常见触发场景：卡片带圆角 + 阴影 + 内部图片/文字溢出需隐藏，结果阴影被齐刷刷砍掉。
用 padding + background-clip 留出阴影空间
最轻量、兼容性好（IE11+）、不改 DOM 结构的解法：在元素内部预留空白，让阴影落在可见区域内。
- 给元素加
padding（值 ≥ 阴影的spread或blur半径），例如padding: 12px - 用
background-clip: padding-box确保背景色/图只铺到 padding 边界，不覆盖留白区 - 阴影用
box-shadow正常写，它现在能完整渲染在 padding 区域内
div.card {
overflow: hidden;
border-radius: 8px;
padding: 12px; /* 至少等于 box-shadow 的模糊半径 */
background-clip: padding-box;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
用伪元素绕过 overflow 剪裁限制
::before 或 ::after 是独立渲染层，不受宿主元素 overflow: hidden 影响——只要它定位在宿主之外，阴影就能完整显示。
- 宿主元素保持
position: relative - 伪元素
position: absolute，z-index: -1，尺寸略大于宿主（如inset: -8px） - 给伪元素设
border-radius和box-shadow，背景透明
div.card {
position: relative;
overflow: hidden;
border-radius: 8px;
}
div.card::before {
content: '';
position: absolute;
inset: -8px;
z-index: -1;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
别踩这些坑
实际调试时最容易卡在几个细节上：
-
border-radius必须同步设置在伪元素或 padding 容器上，否则阴影边缘会露直角 - 如果用了
transform（比如缩放或位移），某些浏览器（尤其是 Safari）可能重新触发剪裁，需加transform-style: preserve-3d或避免混用 -
filter: drop-shadow()虽然不被overflow裁剪，但它作用于整个元素盒（含子元素），容易导致内部内容也被虚化，慎用 - Flex/Grid 容器上直接设
overflow: hidden时，子项的阴影仍会被裁，必须对子项本身处理
真正起效的关键往往就藏在 inset 值是否足够、background-clip 是否生效、以及伪元素有没有被意外遮挡这几个地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
