mask-border-source
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-source thiết lập hình ảnh nguồn được sử dụng để tạo viền mặt nạ của một phần tử.
Thuộc tính mask-border-slice được dùng để chia hình ảnh nguồn thành các vùng, sau đó được áp dụng động vào viền mặt nạ cuối cùng.
Cú pháp
css
/* Giá trị từ khóa */
mask-border-source: none;
/* Giá trị <image> */
mask-border-source: url("image.jpg");
mask-border-source: linear-gradient(to top, red, yellow);
/* Giá trị toàn cục */
mask-border-source: inherit;
mask-border-source: initial;
mask-border-source: revert;
mask-border-source: revert-layer;
mask-border-source: unset;
Giá trị
Định nghĩa hình thức
| Initial value | none |
|---|---|
| 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, but with <url> values made absolute |
| Animation type | discrete |
Cú pháp hình thức
mask-border-source =
none |
<image>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Ví dụ
Cách dùng cơ bản
Thuộc tính này có vẻ chưa được hỗ trợ ở bất kỳ đâu. Khi cuối cùng được hỗ trợ, nó sẽ dùng để xác định nguồn của viền mặt nạ.
css
mask-border-source: url("image.jpg");
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-source — với tiền tố:
css
-webkit-mask-box-image-source: url("image.jpg");
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-source |