mask遮罩与对象阴影演示
<style>.ma {
position: relative;
margin: 100px 0 300px calc(50% - 150px);
width: 300px;
height: 300px;
filter: drop-shadow(0 260px 0 rgba(0,0,0,.05));
}
.ma::before, .ma::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
}
.ma::before {
background: url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center/cover;
filter: drop-shadow(0 0 10px rgba(128,0,0,.5)) drop-shadow(5px 5px 10px rgba(128,0,0,.5)) drop-shadow(-5px -5px 10px rgba(128,0,0,.5));
}
.ma::after {
background: url('https://638183.freep.cn/638183/small/texture/wv1.jpg') no-repeat center/cover;
mask: url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center/cover;
-webkit-mask: url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center/cover;
}
</style>
<div class="ma"></div> 一楼完整代码
<style>
.ma {
position: relative;
margin: 100px 0 300px calc(50% - 150px);
width: 300px;
height: 300px;
filter: drop-shadow(0 260px 0 rgba(0,0,0,.05));
}
.ma::before, .ma::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
}
.ma::before {
background: url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center/cover;
filter: drop-shadow(0 0 10px rgba(128,0,0,.5)) drop-shadow(5px 5px 10px rgba(128,0,0,.5)) drop-shadow(-5px -5px 10px rgba(128,0,0,.5));
}
.ma::after {
background: url('https://638183.freep.cn/638183/small/texture/wv1.jpg') no-repeat center/cover;
mask: url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center/cover;
-webkit-mask: url('https://638183.freep.cn/638183/web/svg/hexagon.svg') no-repeat center/cover;
}
</style>
<div class="ma"></div>
本帖最后由 马黑黑 于 2025-8-2 15:31 编辑
mask遮罩与clip-path一样，不能再为之建立外阴影（内阴影可以），原因是阴影被遮挡或裁剪掉了。
那么，假如需要给主元素创建外阴影、被遮罩对象（即底图）也需要创建外阴影，得考虑其它实现途径，例如一楼效果的利用伪元素的妙法。具体思路是这样：主元素为空，用filter滤镜创建外阴影（反映其内部的可视形状）；两个伪元素各使用不同的背景图，::before使用的是::after将用于遮罩的图片，::after用的是另一种用来做主色的背景图片，::before用filter创建外阴影，::after加遮罩。伪元素::after在::before的上层，故最终效果是背景图被遮罩后的效果，同时::before的外阴影产生作用（外阴影部分超出:after的整体区域）。
主元素阴影投射到下方；::before的阴影分三层，这样里外上下左右都有，很丰满。阴影颜色均使用 rgba 颜色表达体系，借助alpha通道营造扑朔迷离的叠加效果。
伪元素 ::after 的背景图长这样子：
https://638183.freep.cn/638183/small/texture/wv1.jpg
::before的背景图、:afte的遮罩图长酱紫：
https://638183.freep.cn/638183/web/svg/hexagon.svg
通过一系列CSS设置，它们最终长成了一楼的样纸。
mask属性chromium 120才开始正式支持，所以，最好加前缀 -webkit- 以照顾低于120的版本。
好高档！喜欢 本帖最后由 马黑黑 于 2025-8-1 22:51 编辑
mask，遮罩，其含义是用一个图像（前景）去遮挡另一个图像（背景），背景（即被遮挡的对象）能显露出来的是前景遮罩图非透明的区域。一楼的效果中，遮罩图是一张svg图片，N多个多边形不断依次扩张、分裂，不透明的部分是线框，其余区域均为透明；然后，背景图只能以多边形线框的形式呈现自己的“本色”。 有阴影有遮罩，这个效果很惊艳啊{:4_199:} 马黑黑 发表于 2025-8-1 21:50
mask，遮罩，其含义是用另一个图像（前景）去遮挡另一个图像（背景），背景（即被遮挡的对象）能显露出来的 ...
这样弄出的效果很奇妙，好像两者结合后，带着闪光一样，亮闪闪的呢{:4_187:} 红影 发表于 2025-8-1 22:25
这样弄出的效果很奇妙，好像两者结合后，带着闪光一样，亮闪闪的呢
mask遮罩很神奇，图形之间的融合技术也可以用得上，借助渐变还可以弄成更多效果 红影 发表于 2025-8-1 22:23
有阴影有遮罩，这个效果很惊艳啊
效果还不错吧 小文 发表于 2025-8-1 21:31
好高档！喜欢
{:4_191:} 创新的设计层出不穷！ 效果超赞，谢谢马老师精彩分享{:4_191:} 原来遮罩效果这么强大{:4_178:} 小辣椒 发表于 2025-8-2 14:52
原来遮罩效果这么强大
厉害吧 杨帆 发表于 2025-8-2 09:48
效果超赞，谢谢马老师精彩分享
{:4_191:} 樵歌 发表于 2025-8-2 07:57
创新的设计层出不穷！
{:4_190:} 马黑黑 发表于 2025-8-1 22:49
mask遮罩很神奇，图形之间的融合技术也可以用得上，借助渐变还可以弄成更多效果
是啊，这个太神奇了，感觉创造了一个新的图案呢。 马黑黑 发表于 2025-8-1 22:49
效果还不错吧
用伪元素融合，解决了阴影问题，这个也很聪明。 红影 发表于 2025-8-2 20:45
用伪元素融合，解决了阴影问题，这个也很聪明。
这个是想一想就能有的土办法 红影 发表于 2025-8-2 20:43
是啊，这个太神奇了，感觉创造了一个新的图案呢。
对，类似于抽象派表现手法