面具剪裁 | mask-clip
这是一种实验技术
由于此技术规范尚未稳定，在各种浏览器中使用之前，请检查兼容性表。还要注意的是，随着规范的改变，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。
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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
