添加斜角后box-shadow在main元素角落溢出的问题求助

问题核心：你通过mask实现了main元素的斜角裁剪，但内部元素的大box-shadow会从斜角角落溢出——这是因为mask仅作用于元素自身的背景和边框，不会对内部元素的视觉效果（包括阴影）进行裁剪。

以下是两种可行的解决方案：

方案一：给main添加匹配斜角的clip-path #

clip-path会裁剪整个元素的渲染区域（包括内部内容和阴影），结合overflow:hidden可以彻底限制阴影范围：

* {
  --dark-primary: #8bd5b5;
  --dark-tertiary: #a6cce0;
  --dark-on-tertiary: #093544;
  --border: #68dbaf;
  --light-on-primary-container: #00211699;
  --dark-on-primary-container: #86f8ca;
  --bg-1: #68dbaf;
  --bg-2: #a6cce0;
  --s: 20px; /* 统一斜角大小，与mask参数对应 */
}

main {
  max-width: 610px;
  margin: auto;
  padding: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
  /* 添加匹配斜角的clip-path */
  clip-path: polygon(
    var(--s) 0,
    100% 0,
    100% calc(100% - var(--s)),
    calc(100% - var(--s)) 100%,
    0 100%,
    0 var(--s)
  );
}

main:before {
  --p: 1;
  --pixel: calc(var(--p) * 1px);
  --s: calc(var(--pixel) * 20);
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(45deg, var(--bg-1), var(--bg-2));
  --g1: #000 var(--pixel), #0000 0 calc(100% - var(--pixel)), #000 0;
  --g2: #0000 calc(0.707*var(--s)), #000 0 calc(0.707*var(--s) + var(--pixel)), #0000 0 calc(100% - 0.707*var(--s) - var(--pixel)), #000 0 calc(100% - 0.707*var(--s)), #0000 0;
}

main,
main::before {
  -webkit-mask: linear-gradient(45deg, var(--g2)), linear-gradient(-45deg, var(--g2)), linear-gradient(90deg, var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat, linear-gradient(180deg, var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
  mask: linear-gradient(45deg, var(--g2)), linear-gradient(-45deg, var(--g2)), linear-gradient(90deg, var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat, linear-gradient(180deg, var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
}

方案二：用内部容器包裹内容并复用mask #

将所有内部元素放入一个容器，给该容器应用与main相同的mask，同时设置overflow:hidden，让内部元素的阴影被容器裁剪：

修改后的HTML #

<main>
  <div class="inner-wrapper">
    <div class="box" style="box-shadow: 0 0 100px 0 var(--border);">
      <p><a href="about:blank">archive</a> / old websites</p>
    </div>
    <!-- etc... -->
  </div>
</main>

添加的CSS #

.inner-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 复用main的mask样式 */
  -webkit-mask: linear-gradient(45deg, var(--g2)), linear-gradient(-45deg, var(--g2)), linear-gradient(90deg, var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat, linear-gradient(180deg, var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
  mask: linear-gradient(45deg, var(--g2)), linear-gradient(-45deg, var(--g2)), linear-gradient(90deg, var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat, linear-gradient(180deg, var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
}

方案一更简洁高效，直接通过clip-path限制整个main的渲染范围；方案二则适合需要保留main原有mask逻辑，同时单独控制内部内容裁剪的场景。

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