速查在线工具箱CSS 阴影为什么被裁掉了半截？
阴影画在元素边框之外，任何一层祖先容器一旦限制了溢出，超出部分就会被直接切掉。
直接答案
元素本身不管阴影，阴影是渲染阶段画在边框外面的一层效果。它不参与布局，所以容器不会为它预留空间。
真正动手切掉它的是祖先元素的溢出策略：只要链路上任何一层限制了溢出，超出去的部分就被裁掉。
排查方法很直接：从出问题的元素开始往上走，逐层把溢出限制改成可见，看阴影在哪一层恢复完整。
给卡片加了一圈柔和阴影，上下看着都正常，只有某个方向被切成了直角，像被谁裁了一刀。
这不是阴影参数写错了，而是它画到了容器的界线外面。
1阴影画在哪里
理解绘制层与布局层的区别，问题就清楚一半了。
| 概念 | 位置 | 是否影响布局 |
|---|---|---|
| 元素边框 | 布局计算的边界 | 占空间 |
| 外阴影 | 边框之外绘制 | 不占空间 |
| 内阴影 | 边框之内绘制 | 不占空间 |
| 裁切边界 | 由祖先容器的溢出策略决定 | 决定哪里被切 |
只要阴影不占空间，容器就不会主动为它让位。
2哪一层在动手
出问题的几乎都是祖先容器，而不是元素自己。
- 溢出限制
- 容器声明隐藏超出部分
- 滚动容器
- 可滚动区域天然裁切
- 圆角裁切
- 圆角配合溢出限制
- 相邻容器
- 后续元素覆盖在上方
按从内到外的顺序逐层排查，比反复调数值有效。
3三种可行改法
要么给阴影腾出空间，要么把裁切边界往外挪。
| 改法 | 做法 | 适用情况 |
|---|---|---|
| 容器内留白 | 给容器加内边距 | 改动最小、最稳 |
| 外层再包一层 | 让裁切发生在更外层 | 需要保留内层滚动 |
| 改用内阴影 | 把效果画在边框之内 | 不介意视觉方向变化 |
不得已时才去动溢出策略，它常常还承担着布局职责。
顺着这个问题往下用
全部工具总览 →相关疑问
为什么只有上下被切，左右没有？
容器宽度充裕而高度刚好，垂直方向先撞到裁切边界，表现就是上下被切。
给元素加了内边距还是被切，为什么？
说明裁切发生在更外层，需要继续往上找限制溢出的那一层。
滚动容器里的阴影能保住吗？
滚动区天然裁切，通常要把滚动放到更外层，或者给滚动内容留出内边距。
阴影参数越大越容易出问题吗？
是的，扩散范围越大越容易越界，越界之后被裁的概率也越高。
继续看：相关问题与资料
全部问题解答 →
内容标识：本页内容由人工智能辅助生成，并经人工核对与编辑。详见 人工智能生成内容标识说明。
内容说明：本页针对具体使用问题作答，方法步骤与数值由本站自行整理与复算，事实性内容以对应官方规范与文档为准。内容最后核对日期：2026-10-15。若发现错误，欢迎通过页脚反馈入口告知。
内容说明：本页针对具体使用问题作答，方法步骤与数值由本站自行整理与复算，事实性内容以对应官方规范与文档为准。内容最后核对日期：2026-10-15。若发现错误，欢迎通过页脚反馈入口告知。