• 面具剪裁 | mask-clip (Masking) - CSS 中文开发手册
    这是一种实验技术
    由于此技术规范尚未稳定，在各种浏览器中使用之前，请检查兼容性表。还要注意的是，随着规范的改变，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。
    mask-clipCSS属性确定受掩码影响的区域。元素的绘制内容必须限制在此区域。
    /* <geometry-box> values */mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /* Keyword values */ mask-clip: no-clip; /* Non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* 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: unset;

初始值

border-box

适用于

所有元素; 在SVG中，它适用于不包含<defs>元素和所有图形元素的容器元素

继承

没有

媒体

视觉

计算值

作为指定

动画类型

discrete

规范的顺序

形式语法定义的独特的非模糊顺序

  • 语法
    下面列出的一个或多个关键字值，以逗号分隔。
    值
    content-box绘制的内容被剪裁到内容框中。
    padding-box绘制的内容被裁剪到填充框中。
    border-box绘制的内容被裁剪到边框中。
    margin-box绘制的内容被裁剪到边距框中。
    fill-box绘制的内容被裁剪到对象边界框中。
    stroke-box绘制的内容被裁剪到笔画边框。
    view-box使用最近的SVG视图作为参考框。如果viewBox属性指定用于创建SVG视口的元素，引用框位于由viewBox属性和引用框的维度设置为viewBox属性。
    no-clip绘制的内容没有剪裁。
    border此关键字的行为与border-box相同
    padding此关键字的行为与padding-box相同
    content此关键字的行为与content-box相同
    text此关键字将掩码图像剪辑到元素的文本中。
    形式语法
    [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-box where <shape-box> = <box> | margin-box where <box> = border-box | padding-box | content-box
  • 例子
    CSS内容
    #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); mask-size: 100% 100%; mask-clip: border-box; /* Can be changed in the live sample */ }
  • 规格

Specification

Status

Comment

CSS Masking Module Level 1The definition of 'mask-clip' in that specification.

Candidate Recommendation

Initial definition

  • 浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

(Yes)-webkit

53.0 (53.0)

No support

(Yes)-webkit

(Yes)-webkit

border, padding, content, text

1.0-webkit

?

No support

(Yes)

4.0-webkit


Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

?

53.0 (53.0)

No support

?

?

border, padding, content, text

2.1-webkit

?

No support

?

3.2-webkit