如何设置第二层box-shadow使其拥有与第一层相同的border-radius

你遇到的问题是第二层box-shadow因使用负扩展半径（-30px），导致阴影圆角无法匹配父元素的border-radius:20px，出现直角情况。

修复方案：用伪元素拆分多层阴影 #

通过两个伪元素分别实现每层阴影，让每个阴影层都继承父元素的圆角属性：

body {
  font-family: sans-serif;
  border: solid 1px;
  padding: 10px;
  border-radius: 20px;
  position: relative; /* 为伪元素提供定位基准 */
}

body::before,
body::after {
  content: "";
  position: absolute;
  inset: 0; /* 等价于top/left/right/bottom:0 */
  border-radius: inherit; /* 继承父元素圆角 */
  z-index: -1; /* 将阴影置于元素下方，避免遮挡内容 */
}

body::before {
  box-shadow: rgb(195, 197, 199) 0px 23px 0px -15px;
}

body::after {
  box-shadow: rgb(217, 217, 213) 0px 45px 0px -30px;
}

原理说明 #

• 原生多层box-shadow中，负扩展半径会让阴影的形状计算脱离元素圆角约束，拆分后的伪元素可单独为每层阴影设置完整的圆角继承
• inset:0让伪元素完全覆盖父元素范围，保证阴影位置与原效果一致
• 每个伪元素对应一层阴影，各自遵循圆角规则，完美匹配父元素的圆角效果

内容的提问来源于stack exchange，提问作者YEL