DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!
mask-clip
CSS 属性是 CSS 遮罩模块级别 1 规范的一部分,用于设置遮罩绘制区域。它实际上剪切了元素的背景区域,并定义了哪些区域显示在遮罩中: 边框、内边距或内容框。这有点像在照片上加框架,只显示未被框架遮盖的照片部分。只是在这种情况下,我们使用 CSS 盒模型值来设置要剪切的内容。
.element {
mask-image: url(sun.svg);
mask-clip: padding-box;
}
这与 background-clip
属性类似,只是它有三个额外的值适用于 SVG 元素。在下面的演示中,您可以使用此属性更改遮罩绘制区域。下面有相同的图像,以便更好地显示遮罩效果,并标记边框和内边距区域。
语法
mask-clip: <geometry-box> = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
- 初始值:
border-box
- 应用于:所有元素。在 SVG 中,它应用于除
<defs>
元素外的容器元素,所有图形元素。 - 继承:否
- 动画类型:离散
值
/* Keyword values */
mask-clip: border-box;
mask-clip: content-box;
mask-clip: fill-box;
mask-clip: margin-box;
mask-clip: padding-box;
mask-clip: stroke-box;
mask-clip: view-box;
/* No clip */
mask-clip: no-clip;
/* Global values */
mask-clip: intial;
mask-clip: inherit;
mask-clip: unset;
border-box
: 绘制的內容被剪切到边框盒。(默认值)content-box
: 绘制的內容被剪切到內容盒。fill-box
: 绘制的內容被剪切到对象边界盒。margin-box
: 绘制的內容被剪切到外边距盒。padding-box
: 绘制的內容被剪切到内边距盒。stroke-box
: 绘制的內容被剪切到描边边界盒。view-box
: 使用最近的 SVG 视窗作为参考盒。如果为创建 SVG 视窗的元素指定了viewBox
属性- 参考盒位于由
viewBox
属性建立的坐标系的原点。 - 参考盒的尺寸设置为
viewBox
属性的width
和height
值。
- 参考盒位于由
no-clip
: 绘制的內容不会被剪切。initial
: 应用属性的默认设置,即border-box
。inherit
: 采用父元素的mask-clip
值。unset
: 从元素中删除当前的mask-clip
。
笔记
- 对于没有关联 CSS 布局盒的 SVG 元素,值
content-box
、padding-box
计算为fill-box
,而border-box
和margin-box
计算为stroke-box
。 - 对于具有关联 CSS 布局盒的元素,值
fill-box
计算为content-box
,而stroke-box
和view-box
计算为mask-clip
的初始值,即border-box
。
使用多个值
此属性可以接受逗号分隔的值列表,用于遮罩剪裁,每个值应用于 mask-image
属性中指定的相应遮罩层图像。在以下示例中,第一个值指定第一个图像的遮罩绘制区域,第二个值指定第二个图像的遮罩绘制区域,依此类推。
.element {
mask-image: url(image1.png), url(image2.png), url(image3.png);
mask-clip: padding-box, border-box, content-box;
}
演示
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 79+ | 53+ | 全部 | 4+ | 15+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 全部 | 全部 | 59+ |
更多信息
相关属性
mask-clip
.element { mask-clip: padding-box; }
mask-image
.element { mask-image: url(star.svg); }
mask-mode
.element { mask-mode: alpha; }
mask-origin
.element { mask-origin: content-box; }
mask-position
.element { mask-position: 20px center; }
mask-repeat
.element { mask-repeat: repeat-y; }
mask-size
.element { mask-size: 200px 100px; }
mask-type
.element { mask-type: alpha; }