mask-clip

Baseline 2023 *

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Thuộc tính CSS mask-clip xác định vùng bị ảnh hưởng bởi mặt nạ. Nội dung được vẽ của một phần tử phải bị giới hạn trong vùng này.

Cú pháp

css

/* Giá trị <coord-box> */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/* Giá trị từ khóa */
mask-clip: no-clip;

/* Nhiều giá trị */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

/* Giá trị toàn cục */
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: revert-layer;
mask-clip: unset;

Giá trị

Thuộc tính chấp nhận danh sách các giá trị từ khóa được phân tách bằng dấu phẩy. Mỗi giá trị là một <coord-box> hoặc no-clip:

content-box: Nội dung được vẽ bị cắt theo hộp nội dung.
padding-box: Nội dung được vẽ bị cắt theo hộp đệm.
border-box: Nội dung được vẽ bị cắt theo hộp viền.
fill-box: Nội dung được vẽ bị cắt theo hộp giới hạn đối tượng.
stroke-box: Nội dung được vẽ bị cắt theo hộp giới hạn nét vẽ.
view-box: Sử dụng khung nhìn SVG gần nhất làm hộp tham chiếu. Nếu một thuộc tính viewBox được chỉ định cho phần tử tạo ra khung nhìn SVG, hộp tham chiếu được định vị tại gốc của hệ tọa độ được thiết lập bởi thuộc tính viewBox và kích thước của hộp tham chiếu được đặt bằng các giá trị chiều rộng và chiều cao của thuộc tính viewBox.
no-clip: Nội dung được vẽ không bị cắt.
border: Từ khóa này hoạt động giống như border-box.
padding: Từ khóa này hoạt động giống như padding-box.
content: Từ khóa này hoạt động giống như content-box.
text: Từ khóa này cắt hình ảnh mặt nạ theo văn bản của phần tử.

Mô tả

Thuộc tính mask-clip xác định vùng của phần tử bị ảnh hưởng bởi mặt nạ được áp dụng.

Đối với các hình ảnh lớp mặt nạ không tham chiếu đến phần tử SVG <mask>, thuộc tính mask-clip xác định vùng vẽ mặt nạ, hay vùng bị ảnh hưởng bởi mặt nạ. Nội dung được vẽ của phần tử sẽ bị giới hạn trong vùng này.

Thuộc tính mask-clip không có tác dụng đối với hình ảnh lớp mặt nạ tham chiếu đến phần tử <mask>. Các thuộc tính x, y, width, height, và maskUnits của phần tử <mask> xác định vùng vẽ mặt nạ khi nguồn của mask-image là một <mask>.

Một phần tử có thể có nhiều lớp mặt nạ được áp dụng. Số lượng lớp được xác định bởi số lượng giá trị được phân tách bằng dấu phẩy trong giá trị thuộc tính mask-image (ngay cả khi một giá trị là none). Mỗi giá trị mask-clip trong danh sách giá trị được phân tách bằng dấu phẩy được khớp với các giá trị mask-image theo thứ tự. Nếu số lượng giá trị trong hai thuộc tính khác nhau, bất kỳ giá trị dư thừa nào của mask-clip sẽ không được sử dụng, hoặc nếu mask-clip có ít giá trị hơn mask-image, các giá trị mask-clip sẽ được lặp lại.

Định nghĩa hình thức

Initial value	`border-box`
Applies to	all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements
Inherited	no
Computed value	as specified
Animation type	discrete

Cú pháp hình thức

mask-clip = 
  [ <coord-box> | no-clip ]#  

<coord-box> = 
  <paint-box>  |
  view-box     

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

Ví dụ

Cắt mặt nạ theo hộp viền

Ví dụ này minh họa ba giá trị của mask-clip.

HTML

Chúng ta gồm ba phần tử, mỗi phần tử có một giá trị <coord-box> khác nhau làm tên lớp.

html

<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

CSS

CSS xác định phần tử có nền, viền, đệm và lề, cùng với hình ảnh mặt nạ, với mỗi <div> có một <coord-box> khác nhau. Chúng ta đã tạo nội dung với tên của lớp, dịch chuyển văn bản đó lên 10px để tránh bị che khuất.

css

div {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  margin: 10px;
  border: 20px solid #8ca0ff;
  padding: 20px;
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
  mask-size: 100% 100%;
}
.content-box {
  mask-clip: content-box;
}
.border-box {
  mask-clip: border-box;
}
.padding-box {
  mask-clip: padding-box;
}
div::before {
  content: attr(class);
  position: relative;
  top: -10px;
}

body {
  display: flex;
  flex-flow: row wrap;
}

Kết quả

Thông số kỹ thuật

Specification
CSS Masking Module Level 1 # the-mask-clip

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content