Mafuta wa mask-origin wa CSS

定义和用法

mask-origin 属性指定遮罩层图像的原始位置（即遮罩位置区域）。

实例

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

.masked {
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask1 {
  mask-origin: border-box;
}
.mask2 {
  mask-origin: content-box;
}
.mask3 {
  mask-origin: padding-box;
}
.mask4 {
  mask-origin: fill-box;
}

亲自试一试

CSS 语法

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

属性值

值 描述
border-box 位置相对于边框盒。默认值。
content-box 位置相对于内容盒。
padding-box 位置相对于内边框盒。
fill-box 位置相对于对象边界盒。
stroke-box 位置相对于描边边界盒。
view-box 使用最近的 SVG 视口作为参考框。
initial 将此属性设置为其默认值。参阅 initial.
inherit 从其父元素继承此属性。参阅 inherit.

Mafanikio ya mawasiliano

Chaguo cha kuzingatia: border-box
Kupatikana kwa kumwambia: Hakuna
Mifano ya hali ya hali: Hakuna mafanikio. Tazama:Mafano ya mifano ya hali ya hali.
Mwaka: Moduli ya Kuchambua CSS Level 1
Makadara ya KiJavaScript: object.style.maskOrigin="padding-box"

Mwongozo wa kuhakikisha tovuti

Jumla za namba katika tablica ina nia kufungua na kawaida kwa sababu ya kufungua tabia hii kwa programu ya kuhakikisha tovuti.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Vingine vya kusikitika

Mafunzo:Kichwa cha CSS

Tunafikia:Mafuta wa mask wa CSS

Tunafikia:Mafuta wa mask-clip wa CSS

Tunafikia:Mafuta wa mask-composite wa CSS

Tunafikia:Mafuta wa mask-image wa CSS

Tunafikia:Mafuta wa mask-mode wa CSS

Tunafikia:Mafuta wa mask-position wa CSS

Tunafikia:Mafuta wa mask-repeat wa CSS

Tunafikia:Mafuta wa mask-size wa CSS

Tunafikia:Mafuta wa mask-type wa CSS