mask-border

Các thuộc tính thành phần

Thuộc tính này là dạng viết tắt của các thuộc tính CSS sau:

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width

Cú pháp

/* source | slice */
mask-border: url("border-mask.png") 25;

/* source | slice | repeat */
mask-border: url("border-mask.png") 25 space;

/* source | slice | width */
mask-border: url("border-mask.png") 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

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

Giá trị

<'mask-border-source'>

Hình ảnh nguồn. Xem mask-border-source.

<'mask-border-slice'>

Kích thước để cắt hình ảnh nguồn thành các vùng. Có thể chỉ định tối đa bốn giá trị. Xem mask-border-slice.

<'mask-border-width'>

Chiều rộng của mặt nạ viền. Có thể chỉ định tối đa bốn giá trị. Xem mask-border-width.

<'mask-border-outset'>

Khoảng cách của mặt nạ viền từ cạnh ngoài của phần tử. Có thể chỉ định tối đa bốn giá trị. Xem mask-border-outset.

<'mask-border-repeat'>

Xác định cách các vùng cạnh của hình ảnh nguồn được điều chỉnh để khớp với kích thước của mặt nạ viền. Có thể chỉ định tối đa hai giá trị. Xem mask-border-repeat.

<'mask-border-mode'>

Xác định liệu hình ảnh nguồn được xử lý như mặt nạ luminance hay mặt nạ alpha. Xem mask-border-mode.

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

Cú pháp hình thức

mask-border = 
  <'mask-border-source'>                              ||
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||
  <'mask-border-repeat'>                              ||
  <'mask-border-mode'>                                

<mask-border-source> = 
  none     |
  <image>  

<mask-border-slice> = 
  [ <number> | <percentage> ]{1,4} fill?  

<mask-border-width> = 
  [ <length-percentage> | <number> | auto ]{1,4}  

<mask-border-outset> = 
  [ <length> | <number> ]{1,4}  

<mask-border-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<mask-border-mode> = 
  luminance  |
  alpha      

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<length-percentage> = 
  <length>      |
  <percentage>  

<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ụ

Đặt mặt nạ viền dạng bitmap

Trong ví dụ này, chúng tôi sẽ che viền của một phần tử bằng một mẫu hình thoi. Nguồn của mặt nạ là một tệp ".png" 90 nhân 90 pixel, với ba hình thoi xếp theo chiều dọc và chiều ngang:

Để khớp với kích thước của một hình thoi, chúng tôi sẽ dùng giá trị 90 chia cho 3, tức là 30, để cắt hình ảnh thành các vùng góc và cạnh. Giá trị lặp round sẽ làm cho các lát mặt nạ khớp đều, tức là không bị cắt xén hoặc có khoảng trống.

<div class="masked">
  This element is surrounded by a bitmap-based mask border! Pretty neat, isn't
  it?
</div>

.masked {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  -webkit-mask-box-image: url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /          /* slice */
    20px /             /* width */
    1px                /* outset */
    round;             /* repeat */

  mask-border:
    url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /        /* slice */
    20px /           /* width */
    1px              /* outset */
    round;           /* repeat */
}

Đặc tả kỹ thuật

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

Xem thêm

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-source
• mask-border-width