mask-clip

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

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 属性的 widthheight 值。
  • no-clip: 绘制的內容不会被剪切。
  • initial: 应用属性的默认设置,即 border-box
  • inherit: 采用父元素的 mask-clip 值。
  • unset: 从元素中删除当前的 mask-clip

笔记

  • 对于没有关联 CSS 布局盒的 SVG 元素,值 content-boxpadding-box 计算为 fill-box,而 border-boxmargin-box 计算为 stroke-box
  • 对于具有关联 CSS 布局盒的元素,值 fill-box 计算为 content-box,而 stroke-boxview-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;
}

演示

浏览器支持

IEEdgeFirefoxChromeSafariOpera
79+53+全部4+15+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部全部全部全部59+
来源:caniuse

更多信息