CSS mask-clip egenskap

定义和用法

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;
}

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
border-box Det ritade innehållet klipps till kantboxen (border box). Standardvärde.
content-box Det ritade innehållet klipps till innehållsboxen (content box).
padding-box Det ritade innehållet klipps till inre marginalboxen (padding box).
fill-box Det ritade innehållet klipps till objektets boundsbox (object bounding box).
stroke-box Det ritade innehållet klipps till kantlinjeboundsboxen (stroke bounding box).
view-box Använd närmaste SVG-viewport som referensram.
no-clip Ingen klippning.
border Liknar border-box.
padding Liknar padding-box.
content Liknar content-box.
text Klipp av skuggan till elementets text.
initial Sätt detta egenskap till dess standardvärde. Se: initial.
inherit Inherritar detta egenskap från föräldrelementet. Se: inherit.

Tekniska detaljer

Standardvärde: border-box
Arv: Nej
Animeringsproduktion: Stöds inte. Se:Animeringsrelaterade egenskaper.
Version: CSS Masking Module Level 1
JavaScript-syntax: object.style.maskClip="padding-box"

Webbläsarstöd

Tabellens numrer representerar den första webbläsarversion som helt stöder detta egenskap.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Relaterade sidor

Lärobok:CSS-skygga

Referens:CSS mask egenskap

Referens:CSS mask-composite egenskap

Referens:CSS mask-image egenskap

Referens:CSS mask-mode egenskap

Referens:CSS mask-origin egenskap

Referens:CSS mask-position egenskap

Referens:CSS mask-repeat egenskap

Referens:CSS mask-size egenskap

Referens:CSS mask-type egenskap