ຖານ 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;
}

亲自试一试

CSS 语法

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

属性值

描述
border-box 绘制的内容被裁剪到边框盒(border box)。默认值。
content-box 绘制的内容被裁剪到内容盒(content box)。
padding-box 绘制的内容被裁剪到内边距盒(padding box)。
fill-box 绘制的内容被裁剪到对象边界盒(object bounding box)。
stroke-box 绘制的内容被裁剪到描边边界盒(stroke bounding box)。
view-box 使用最近的 SVG 视口作为参考盒。
no-clip 不进行裁剪。
border 与 border-box 相同。
padding 与 padding-box 相同。
content 与 content-box 相同。
text 将遮罩裁剪到元素的文本。
initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: border-box
继承性:
动画制作: 不支持。请参阅:动画相关属性
版本: CSS Masking Module Level 1
JavaScript 语法: object.style.maskClip="padding-box"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

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