语法
/* <coord-box> values */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
/* Keyword values */
mask-clip: no-clip;
/* Multiple values */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;
/* Global values */
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: revert-layer;
mask-clip: unset;
值
该属性接受逗号分隔的关键字值列表。每个值都是一个 <coord-box> 或 no-clip
content-box-
绘制内容被裁剪到内容框。
padding-box-
绘制内容被裁剪到内边距框。
border-box-
绘制内容被裁剪到边框框。
fill-box-
绘制内容被裁剪到对象边界框。
stroke-box-
绘制内容被裁剪到描边边界框。
view-box-
使用最近的 SVG 视口作为参考框。如果为创建 SVG 视口的元素指定了
viewBox属性，则参考框位于由viewBox属性建立的坐标系原点，并且参考框的尺寸设置为viewBox属性的宽度和高度值。 no-clip-
绘制内容不被裁剪。
border-
此关键字的行为与
border-box相同。 padding-
此关键字的行为与
padding-box相同。 content-
此关键字的行为与
content-box相同。 文本-
此关键字将蒙版图像裁剪到元素的文本。
描述
mask-clip 属性定义了元素中受应用蒙版影响的区域。
对于不引用 SVG <mask> 元素的蒙版层图像，mask-clip 属性定义了蒙版绘制区域，或受蒙版影响的区域。元素的绘制内容将限制在此区域内。
mask-clip 属性对引用 <mask> 元素的蒙版层图像没有影响。当 mask-image 的源是 <mask> 时，<mask> 元素的 x、y、width、height 和 maskUnits 属性决定了蒙版绘制区域。
一个元素可以应用多个蒙版层。层的数量由 mask-image 属性值中逗号分隔值的数量决定（即使某个值为 none）。逗号分隔值列表中的每个 mask-clip 值按顺序与 mask-image 值匹配。如果两个属性中的值数量不同，则 mask-clip 的任何多余值将不被使用，或者，如果 mask-clip 的值少于 mask-image，则 mask-clip 的值会重复。
正式定义
正式语法
mask-clip =
[ <coord-box> | no-clip ]#
<coord-box> =
<paint-box> |
view-box
<paint-box> =
<visual-box> |
fill-box |
stroke-box
<visual-box> =
content-box |
padding-box |
border-box
示例
将蒙版裁剪到边框框
此示例演示了三个 mask-clip 值。
HTML
我们包含三个元素，每个元素都有一个不同的 <coord-box> 值作为类名。
<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>
CSS
CSS 定义了元素具有背景、边框、内边距和外边距，以及蒙版图像，每个 <div> 都具有不同的 <coord-box>。我们生成了带有类名称的内容，将文本向上移动 10 像素以防止其被蒙版遮挡。
div {
width: 100px;
height: 100px;
background-color: #8cffa0;
margin: 10px;
border: 20px solid #8ca0ff;
padding: 20px;
mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
mask-size: 100% 100%;
}
.content-box {
mask-clip: content-box;
}
.border-box {
mask-clip: border-box;
}
.padding-box {
mask-clip: padding-box;
}
div::before {
content: attr(class);
position: relative;
top: -10px;
}
结果
规范
| 规范 |
|---|
| CSS 蒙版模块 Level 1 # the-mask-clip |
浏览器兼容性
加载中…