如何解决将遮罩应用于框阴影
我有一个已应用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。