CSS mask关键属性汇总
本帖最后由 马黑黑 于 2025-11-11 12:20 编辑 <br /><br /><style>.dTab { width: 100%; margin: auto; border-collapse: collapse; font: normal 16px/24px Consolas,'Courier New','Andale Mono', monospace; }
.dTab caption { font: bold 1.8em/2 sans-serif; text-align: center;}
.dTab tr:nth-child(odd) { background: #f8f8fa; }
.dTab tr:not():hover { background: #d2c48c; }
.dTab th, .dTab td { padding: 10px; border: 1px solid #999; }
.dTab th { background: #ddd; text-align: center; }
</style>
<table class="dTab">
<caption>CSS mask关键属性</caption>
<tr>
<th width="140">属性</th>
<th>说明</th>
<th>取值</th>
<th width="100">默 认 值</th>
</tr>
<tr>
<td>mask-image</td>
<td>定义遮罩的图像源，定义一个或多个遮罩图像，这些图像的不透明度值决定了元素的哪些部分应该显示或隐藏</td>
<td>可以是none表示没有遮罩，或者是一个URL指向遮罩图像，也可以是linear-gradient, radial-gradient等</td>
<td>none</td>
</tr>
<tr>
<td>mask-repeat</td>
<td>可选值与background-repeat相同，控制遮罩图像是否重复以及如何重复</td>
<td>1. repeat-x： repeat no-repeat<br>2. repeat-y：no-repeat repeat<br>3. repeat：repeat repeat<br>4. space：space space<br>5. round：round round<br>6. no-repeat：no-repeat no-repeat</td>
<td>repeat</td>
</tr>
<tr>
<td>mask-position</td>
<td>可选值与background-position相同，定义遮罩图像在元素背景坐标系统中的初始位置</td>
<td>top、bottom、left、right、center、百分比、长度值、revert-layer、unset、inherit、initial、revert</td>
<td>0% 0%</td>
</tr>
<tr>
<td>mask-clip</td>
<td>定义哪些元素的边框盒部分应该被遮罩图像裁剪，可选值与background-clip相同</td>
<td>content-box、padding-box、border-box、fill-box、stroke-box、view-box、no-clip、border、padding、content、text</td>
<td>border-box</td>
</tr>
<tr>
<td>mask-origin</td>
<td>可选值与background-origin相同，定义遮罩图像相对于哪个盒子定位</td>
<td>content-box、padding-box、border-box、fill-box、stroke-box、view-box、content、padding、border</td>
<td>border-box</td>
</tr>
<tr>
<td>mask-size</td>
<td>控制遮罩图像的大小，可选值与background-size相同</td>
<td>auto、cover, contain, 长度值，百分比等</td>
<td>auto</td>
</tr>
<tr>
<td>mask-composite</td>
<td>定义当多个遮罩图像应用于同一元素时，它们是如何组合在一起的，遮罩图像的叠加方式</td>
<td>add（叠加）、subtract（挖空）、intersect（重叠保留）、exclude（并集）</td>
<td>add</td>
</tr>
<tr>
<td>mask-mode</td>
<td>定义了遮罩图像中颜色通道的处理方式。默认情况下，遮罩图像的alpha通道被用作遮罩，但你也可以选择使用RGB颜色通道</td>
<td>luminance (亮度模式)，alpha (默认，alpha通道)，match-source (源图像的原模式)</td>
<td>alpha</td>
</tr>
</table> CSS mask 属性对当前版本的现代浏览器来说没有任何障碍，但还是需要注意其兼容性：对 chromium 内核 < 120 的第三方封装而言，它是得不到支持的，需要加入前缀 -webkit-，例如简写形式：
mask: url('遮罩图片地址') no-repeat center/cover;
-webkit-mask: url('遮罩图片地址') no-repeat center/cover;
两行都写，第一行被支持版本直接渲染，第二行向下兼容，内核版本低于120的chrome封装也能正常渲染。 遮罩里的讲究还挺多的，这样整理一下的好{:4_187:} 这个帖子有意思，鼠标所在的边框行还是高亮的呢{:4_204:} 运用遮罩可生成奇妙的效果，但掌握遮罩属性是关键也是难点，谢谢马老师用心汇总CSS mask关键属性{:4_176:} 杨帆 发表于 2025-11-11 15:06
运用遮罩可生成奇妙的效果，但掌握遮罩属性是关键也是难点，谢谢马老师用心汇总CSS mask关键属性
{:4_190:}
页:
[1]