mask遮罩与对象阴影演示

马黑黑 · 发表于 2025-8-1 21:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-8-1 21:20

一楼完整代码

<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-1 21:21

本帖最后由马黑黑于 2025-8-2 15:31 编辑

mask遮罩与clip-path一样，不能再为之建立外阴影（内阴影可以），原因是阴影被遮挡或裁剪掉了。

那么，假如需要给主元素创建外阴影、被遮罩对象（即底图）也需要创建外阴影，得考虑其它实现途径，例如一楼效果的利用伪元素的妙法。具体思路是这样：主元素为空，用filter滤镜创建外阴影（反映其内部的可视形状）；两个伪元素各使用不同的背景图，::before使用的是::after将用于遮罩的图片，::after用的是另一种用来做主色的背景图片，::before用filter创建外阴影，::after加遮罩。伪元素::after在::before的上层，故最终效果是背景图被遮罩后的效果，同时::before的外阴影产生作用（外阴影部分超出:after的整体区域）。

主元素阴影投射到下方；::before的阴影分三层，这样里外上下左右都有，很丰满。阴影颜色均使用 rgba 颜色表达体系，借助alpha通道营造扑朔迷离的叠加效果。

伪元素 ::after 的背景图长这样子：

登录/注册后可看大图

::before的背景图、:afte的遮罩图长酱紫：

登录/注册后可看大图

通过一系列CSS设置，它们最终长成了一楼的样纸。

mask属性chromium 120才开始正式支持，所以，最好加前缀 -webkit- 以照顾低于120的版本。

小文 · 发表于 2025-8-1 21:31

好高档！喜欢

马黑黑 · 发表于 2025-8-1 21:50

本帖最后由马黑黑于 2025-8-1 22:51 编辑

mask，遮罩，其含义是用一个图像（前景）去遮挡另一个图像（背景），背景（即被遮挡的对象）能显露出来的是前景遮罩图非透明的区域。一楼的效果中，遮罩图是一张svg图片，N多个多边形不断依次扩张、分裂，不透明的部分是线框，其余区域均为透明；然后，背景图只能以多边形线框的形式呈现自己的“本色”。