马黑黑 发表于 2024-1-13 11:10

CSS mask 的妙用

<style>
.mybox {
        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>

<p>先看成品：</p>
<div class="mybox"></div>

马黑黑 发表于 2024-1-13 11:11

本帖最后由 马黑黑 于 2024-1-13 11:16 编辑 <br /><br /><h2><span style="font-size: 14px; font-weight: normal;">先做一个径向渐变背景的盒子</span></h2><p><br></p>
<p></p><ol><li>&lt;style&gt;</li><li>.mybox1 {</li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>margin: 20px auto;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>position: relative;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>width: 300px;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>height: 300px;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>border-radius: 50%;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>border: 10px solid green;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>background: radial-gradient(orange,yellow);</span></li><li>}</li><li>&lt;/style&gt;</li><li><br></li><li>&lt;div class="mybox1"&gt;&lt;/div&gt;</li></ol><p></p>
<p><br></p><p>效果如下：</p>
<style>
.mybox1 {
        margin: 20px auto;
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 10px solid green;
        background: radial-gradient(orange,yellow);
}
</style>

<div class="mybox1"></div>

马黑黑 发表于 2024-1-13 11:11

本帖最后由 马黑黑 于 2024-1-13 11:52 编辑 <br /><br /><p>二楼的效果已经很漂亮了，不过和一楼的效果比不了。这时我们可以祭出 mask 属性。祭出之前，我们先用<font color="#ff0000">重复性线性渐变</font>做一个盒子，用来观察效果——因为mask和background语法一致，我们就先看看要设置的mask属性的原本效果：</p><p><br></p><p></p><ol><li>&lt;style&gt;</li><li>.mybox2 {</li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>margin: 20px auto;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>position: relative;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>width: 300px;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>height: 300px;</span></li><li><span style="white-space: normal;"><span style="color: rgb(255, 0, 0); white-space: pre;">        </span><font color="#0000ff">background:&nbsp;</font></span></li><li><span style="white-space: normal;"><font color="#ff0000"><span style="white-space:pre">                </span>repeating-linear-gradient(to top right,black 10%,transparent 17%),</font></span></li><li><span style="white-space: normal;"><font color="#ff0000"><span style="white-space:pre">                </span>repeating-linear-gradient(to bottom right,black 10%,transparent 17%);</font></span></li><li>}</li><li>&lt;/style&gt;</li><li><br></li><li>&lt;div class="mybox2"&gt;&lt;/div&gt;</li></ol><p></p>
<p><br></p>
<style>
.mybox2 {
        margin: 20px auto;
        position: relative;
        width: 300px;
        height: 300px;
        background:
                repeating-linear-gradient(to top right,black 10%,transparent 17%),
                repeating-linear-gradient(to bottom right,black 10%,transparent 17%);
}
</style>

<div class="mybox2"></div>

<p>这效果看上去没啥美感，不过没关系，它只是用来观察、不是最终呈现的样纸，它的重复性线性背景语句我们将剥离出来，用到一楼的盒子里做&nbsp;mask&nbsp;属性用。下面是在二楼代码基础上加了mask属性后的代码：</p><p><br></p><p><ol><li>&lt;style&gt;</li><li>.mybox1 {</li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>margin: 20px auto;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>position: relative;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>width: 300px;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>height: 300px;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>border-radius: 50%;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>border: 10px solid green;</span></li><li><span style="white-space: normal;"><span style="white-space:pre">        </span>background: radial-gradient(orange,yellow);</span></li><li><span style="color: rgb(255, 0, 0); white-space: pre;">        </span><font color="#0000ff">-webkit-mask:&nbsp;</font></li><li><font color="#ff0000"><span style="white-space: pre;">        </span><span style="white-space: pre;">        </span>repeating-linear-gradient(to top right,black 10%,transparent 17%),</font></li><li><font color="#ff0000"><span style="white-space: pre;">        </span><span style="white-space: normal;"><span style="white-space:pre">        </span>repeating-linear-gradient(to bottom right,black 10%,transparent 17%);</span></font></li><li>}</li><li>&lt;/style&gt;</li><li><br></li><li>&lt;div class="mybox1"&gt;&lt;/div&gt;</li></ol><div><br></div><div>运行上面的代码，差不多就是一楼的效果了。</div></p><p></p>

马黑黑 发表于 2024-1-13 11:11

本帖最后由 马黑黑 于 2024-1-13 11:51 编辑

最后还差一步：使用 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

又是个神奇的效果，等着看是怎么弄出来的{:4_173:}

马黑黑 发表于 2024-1-13 11:46

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

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

起个网名好难 发表于 2024-1-13 13:03

好！ 真是玩出花来了{:5_106:}

红影 发表于 2024-1-13 13:37

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

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

樵歌 发表于 2024-1-13 15:17

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

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

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

大又甜

马黑黑 发表于 2024-1-13 17:55

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

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

樵歌 发表于 2024-1-13 19:07

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

还变色，真好{:4_189:}

红影 发表于 2024-1-13 20:29

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

这里面扩展下去还有很多东西呢{:4_187:}

马黑黑 发表于 2024-1-13 21:57

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

点到为止就好

红影 发表于 2024-1-14 10:55

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

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

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

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

可能吧

红影 发表于 2024-1-14 17:31

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

空了我得再学一个，好好感受一下它{:4_173:}

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

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

{:4_181:}

红影 发表于 2024-1-14 19:56

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


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

马黑黑 发表于 2024-1-14 21:01

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

没关系慢慢来
页: [1] 2 3
查看完整版本: CSS mask 的妙用