Thuộc tính mask-clip CSS

Trang trước mask
Trang tiếp theo 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;
}

Thử ngay

Ngữ pháp CSS

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

Giá trị thuộc tính

Giá trị	Mô tả
border-box	Nội dung vẽ bị cắt đến hộp boundary box (border box). Giá trị mặc định.
content-box	Nội dung vẽ bị cắt đến hộp nội dung (content box).
padding-box	Nội dung vẽ bị cắt đến hộp padding (padding box).
fill-box	Nội dung vẽ bị cắt đến hộp boundary box (object bounding box).
stroke-box	Nội dung vẽ bị cắt đến hộp边界盒 (stroke bounding box).
view-box	Sử dụng viewport SVG gần nhất làm hộp tham chiếu.
no-clip	Không cắt.
border	Cùng với border-box.
padding	Cùng với padding-box.
content	Cùng với content-box.
text	Cắt che khuất đến văn bản của phần tử.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	border-box
Kế thừa:	Không
Ch製 animation:	Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	Module Masking CSS Level 1
Ngữ pháp JavaScript:	object.style.maskClip="padding-box"