CSS mask 的妙用

马黑黑

先看成品：

马黑黑

先做一个径向渐变背景的盒子

1. <style>
2. .mybox1 {
3. margin: 20px auto;
4. position: relative;
5. width: 300px;
6. height: 300px;
7. border-radius: 50%;
8. border: 10px solid green;
9. background: radial-gradient(orange,yellow);
10. }
11. </style>
12. 
    
13. <div class="mybox1"></div>

效果如下：

马黑黑

二楼的效果已经很漂亮了，不过和一楼的效果比不了。这时我们可以祭出 mask 属性。祭出之前，我们先用重复性线性渐变做一个盒子，用来观察效果——因为mask和background语法一致，我们就先看看要设置的mask属性的原本效果：

1. <style>
2. .mybox2 {
3. margin: 20px auto;
4. position: relative;
5. width: 300px;
6. height: 300px;
7. background: 
8. repeating-linear-gradient(to top right,black 10%,transparent 17%),
9. repeating-linear-gradient(to bottom right,black 10%,transparent 17%);
10. }
11. </style>
12. 
    
13. <div class="mybox2"></div>

这效果看上去没啥美感，不过没关系，它只是用来观察、不是最终呈现的样纸，它的重复性线性背景语句我们将剥离出来，用到一楼的盒子里做 mask 属性用。下面是在二楼代码基础上加了mask属性后的代码：

1. <style>
2. .mybox1 {
3. margin: 20px auto;
4. position: relative;
5. width: 300px;
6. height: 300px;
7. border-radius: 50%;
8. border: 10px solid green;
9. background: radial-gradient(orange,yellow);
10. -webkit-mask: 
11. repeating-linear-gradient(to top right,black 10%,transparent 17%),
12. repeating-linear-gradient(to bottom right,black 10%,transparent 17%);
13. }
14. </style>
15. 
    
16. <div class="mybox1"></div>

运行上面的代码，差不多就是一楼的效果了。

马黑黑

最后还差一步：使用 mask-composite 属性，这个可以称为遮罩复合。遮罩复合针对同时设置多个遮罩值的情形，缺省值为累加 add，还有更多的值，有兴趣的朋友可以自行网补，一楼使用的是 xor（位运算、异域运算），之前在svg滤镜中也曾在某个属性值用过。
下面就是在三楼最后代码段的基础上加入 mask-composite 属性后的代码，也就是一楼所使用的代码：

• <style>
• .mybox1 {
•         margin: 20px auto;
•         position: relative;
•         width: 300px;
•         height: 300px;
•         border-radius: 50%;
•         border: 10px solid green;
•         background: radial-gradient(orange,yellow);
•         -webkit-mask:
•                 repeating-linear-gradient(to top right,black 10%,transparent 17%),
•                 repeating-linear-gradient(to bottom right,black 10%,transparent 17%);
•         -webkit-mask-composite: xor;
• }
• </style>
• <div class="mybox1"></div>
  

红影

又是个神奇的效果，等着看是怎么弄出来的

马黑黑

红影 发表于 2024-1-13 11:23
又是个神奇的效果，等着看是怎么弄出来的

讲完了。这是mask用法举例，用重复线性渐变（位图）去遮罩径向渐变背景。

起个网名好难

好！ 真是玩出花来了

红影

马黑黑 发表于 2024-1-13 11:46
讲完了。这是mask用法举例，用重复线性渐变（位图）去遮罩径向渐变背景。

我去试了一下，如果不加 mask-composite ，感觉更有立体感呢

樵歌

哇，好大好成熟的瓜，小冬雨@冬天的雨 快来一起分享。

马黑黑

樵歌 发表于 2024-1-13 15:17
哇，好大好成熟的瓜，小冬雨@冬天的雨 快来一起分享。

大又甜

马黑黑

红影 发表于 2024-1-13 13:37
我去试了一下，如果不加 mask-composite ，感觉更有立体感呢

不加也用了 mask-composite，缺省值是各层遮罩累加 add

樵歌

马黑黑 发表于 2024-1-13 17:53
大又甜

还变色，真好

红影

马黑黑 发表于 2024-1-13 17:55
不加也用了 mask-composite，缺省值是各层遮罩累加 add

这里面扩展下去还有很多东西呢

马黑黑

红影 发表于 2024-1-13 20:29
这里面扩展下去还有很多东西呢

点到为止就好

红影

马黑黑 发表于 2024-1-13 21:57
点到为止就好

这个很好玩啊，用它应该能玩出很多想不到的效果呢。

马黑黑

红影 发表于 2024-1-14 10:55
这个很好玩啊，用它应该能玩出很多想不到的效果呢。

可能吧

红影

马黑黑 发表于 2024-1-14 11:31
可能吧

空了我得再学一个，好好感受一下它

马黑黑

红影 发表于 2024-1-14 17:31
空了我得再学一个，好好感受一下它

红影

马黑黑 发表于 2024-1-14 18:16

最近事情多了点，都来不及跟上黑黑的教学好好玩一下呢

马黑黑

红影 发表于 2024-1-14 19:56
最近事情多了点，都来不及跟上黑黑的教学好好玩一下呢

没关系慢慢来