将遮罩应用于框阴影

问题描述

我有一个已应用mask的div。我注意到我不能在同一div上应用Box-shadow，因此必须将阴影移到“包装”的div。

问题在于，如果阴影放置在阴影div上，则mask不会应用于阴影。

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

.wrapper {
  width: 200px;
  height: 200px;
  Box-shadow: 17px 13px 7px 3px rgba(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,black 31px
  ) right bottom / 51% 51%,radial-gradient(
    circle at left bottom,black 31px
  ) left bottom / 51% 51%;
  
  -webkit-mask-repeat: no-repeat;
}

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

解决方法

您需要一个下拉阴影，而不是一个盒子阴影：

.wrapper {
  width: 200px;
  height: 200px;
  filter:drop-shadow(17px 13px 7px rgba(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,black 31px
  ) right bottom / 51% 51%,radial-gradient(
    circle at left bottom,black 31px
  ) left bottom / 51% 51%;
  
  -webkit-mask-repeat: no-repeat;
}

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