CSS mask-clip 属性

定义和用法

mask-clip 属性用于指定遮罩图像影响的区域。

实例

展示 mask-clip 属性的不同值：

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%;
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

Try It Yourself

CSS Syntax

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

Attribute Value

Value Description
border-box The content to be drawn is clipped to the border box. Default value.
content-box The content to be drawn is clipped to the content box.
padding-box The content to be drawn is clipped to the padding box.
fill-box The content to be drawn is clipped to the object bounding box.
stroke-box The content to be drawn is clipped to the stroke bounding box.
view-box Uses the nearest SVG viewport as the reference box.
no-clip No clipping.
border Same as border-box.
padding Same as padding-box.
content Same as content-box.
text Cuts the mask to the element's text.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: border-box
Inheritance: No
Animation Production: Not supported. See:Animation-related Properties.
Version: CSS Masking Module Level 1
JavaScript Syntax: object.style.maskClip="padding-box"

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Σχετικές σελίδες

Οδηγός:CSS σκιές

Αναφορά:CSS mask 属性

Αναφορά:CSS mask-composite 属性

Αναφορά:CSS mask-image 属性

Αναφορά:CSS mask-mode 属性

Αναφορά:CSS mask-origin 属性

Αναφορά:CSS mask-position 属性

Αναφορά:CSS mask-repeat 属性

Αναφορά:CSS mask-size 属性

Αναφορά:CSS mask-type 属性