将遮罩应用于框阴影

Question

我有一个应用了 mask 的 div。我注意到我不能在同一个 div 上应用 box-shadow，所以我必须将阴影移动到“包装器”div。

问题是，如果阴影放在阴影 div 上，mask 不会应用到阴影。

如何将 mask 应用于 div 及其阴影？

.wrapper {
  width: 200px;
  height: 200px;
  box-shadow: 17px 13px 7px 3px rgba(0,0,0,0.75);
}

.b {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 2px solid black;


  
  -webkit-mask: radial-gradient(
    circle at center top,
    transparent 30px,
    black 31px
  ) top / 100% 51%, 
  radial-gradient(
    circle at right bottom,
    transparent 30px,
    black 31px
  ) right bottom / 51% 51%, 
  radial-gradient(
    circle at left bottom,
    transparent 30px,
    black 31px
  ) left bottom / 51% 51%;
  
  -webkit-mask-repeat: no-repeat;
}

<div class="wrapper">
  <div class="b"></div>
</div>

Answer 1

你需要 drop-shadow，而不是 box-shadow:

.wrapper {
  width: 200px;
  height: 200px;
  filter:drop-shadow(17px 13px 7px rgba(0,0,0,0.75));
}

.b {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 2px solid black;


  
  -webkit-mask: radial-gradient(
    circle at center top,
    transparent 30px,
    black 31px
  ) top / 100% 51%, 
  radial-gradient(
    circle at right bottom,
    transparent 30px,
    black 31px
  ) right bottom / 51% 51%, 
  radial-gradient(
    circle at left bottom,
    transparent 30px,
    black 31px
  ) left bottom / 51% 51%;
  
  -webkit-mask-repeat: no-repeat;
}

<div class="wrapper">
  <div class="b"></div>
</div>

将遮罩应用于框阴影

Applying mask to box-shadow

html

css

css-shapes

css-mask