Thuộc tính mask-origin CSS

Trang trước mask-mode
Trang tiếp theo mask-position

Định nghĩa và cách sử dụng

mask-origin Thuộc tính xác định vị trí ban đầu của hình ảnh che khuất (tức là khu vực vị trí che khuất).

Mô hình

Hiển thị mask-origin Các giá trị khác nhau của thuộc tính:

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

Thử ngay

Ngôn ngữ CSS

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

Giá trị thuộc tính

Giá trị	Mô tả
border-box	Vị trí so với khung viền. Giá trị mặc định.
content-box	Vị trí so với khung nội dung.
padding-box	Vị trí so với khung nội边框.
fill-box	Vị trí so với khung boundary box của đối tượng.
stroke-box	Vị trí so với khung viền boundary box.
view-box	Sử dụng SVG viewport gần nhất làm khung tham chiếu.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Tiếp nhận thuộc tính này từ phần tử cha của nó. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	border-box
Kế thừa:	Không
Chế tạo animation:	Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	Mô đun Masking CSS Cấp 1
Ngôn ngữ lập trình JavaScript:	object.style.maskOrigin="padding-box"