mask-border-width
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thuộc tính CSS mask-border-width thiết lập độ rộng của viền mặt nạ của một phần tử.
Cú pháp
/* Giá trị từ khóa */
mask-border-width: auto;
/* Giá trị <length> */
mask-border-width: 1rem;
/* Giá trị <percentage> */
mask-border-width: 25%;
/* Giá trị <number> */
mask-border-width: 3;
/* trên và dưới | trái và phải */
mask-border-width: 2em 3em;
/* trên | trái và phải | dưới */
mask-border-width: 5% 15% 10%;
/* trên | phải | dưới | trái */
mask-border-width: 5% 2em 10% auto;
/* Giá trị toàn cục */
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: revert;
mask-border-width: revert-layer;
mask-border-width: unset;
Thuộc tính mask-border-width có thể được chỉ định bằng một, hai, ba hoặc bốn giá trị được chọn từ danh sách giá trị bên dưới.
- Khi chỉ định một giá trị, nó áp dụng cùng một độ rộng cho tất cả bốn cạnh.
- Khi chỉ định hai giá trị, độ rộng đầu tiên áp dụng cho trên và dưới, giá trị thứ hai cho trái và phải.
- Khi chỉ định ba giá trị, độ rộng đầu tiên áp dụng cho trên, giá trị thứ hai cho trái và phải, giá trị thứ ba cho dưới.
- Khi chỉ định bốn giá trị, các độ rộng áp dụng cho trên, phải, dưới, và trái theo thứ tự đó (theo chiều kim đồng hồ).
Giá trị
<length-percentage>-
Độ rộng của viền mặt nạ, được chỉ định dưới dạng
<length>hoặc<percentage>. Phần trăm tương đối với chiều rộng của vùng viền cho các độ lệch ngang và chiều cao của vùng viền cho các độ lệch dọc. Không được âm. <number>-
Độ rộng của viền mặt nạ, được chỉ định như một bội số của
border-widthtương ứng. Không được âm. auto-
Độ rộng của viền mặt nạ được đặt bằng chiều rộng hoặc chiều cao nội tại (tùy điều kiện) của
mask-border-slicetương ứng. Nếu hình ảnh không có kích thước nội tại cần thiết, thìborder-widthtương ứng được sử dụng thay thế.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
| Inherited | no |
| Percentages | relative to width/height of the mask border image area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |
Cú pháp hình thức
mask-border-width =
[ <length-percentage> | <number> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
Ví dụ
Cách dùng cơ bản
mask-border-width xác định độ rộng của viền mặt nạ — đặt giá trị này khác với mask-border-slice sẽ làm cho các lát cắt được chia tỷ lệ để vừa với viền mặt nạ.
/* Mặt nạ cuối cùng được thu nhỏ xuống 20px */
mask-border-slice: 30 fill;
mask-border-width: 20px;
Các trình duyệt dựa trên Chromium hỗ trợ phiên bản cũ của thuộc tính này — mask-box-image-width — với tiền tố:
-webkit-mask-box-image-width: 20px;
Note:
Trang mask-border có một ví dụ hoạt động (sử dụng các thuộc tính viền mặt nạ có tiền tố lỗi thời được hỗ trợ trong Chromium), vì vậy bạn có thể hình dung được hiệu ứng.
Thông số kỹ thuật
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border-width |