CSS mask-clip egenskap
- Föregående sida mask
- Nästa sida mask-composite
定义和用法
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; }
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
- Föregående sida mask
- Nästa sida mask-composite