Thuộc tính border-image

Thuộc tính border-image

Thuộc tính border trong css3 dùng để định dạng các dạng border bằng hình ảnh.

Cấu trúc

tag {
    border-image: giá trị;
    -moz-border-image: giá trị;
    -webkit-border-image: giá trị;
    -ms-border-image: giá trị;
    -o-border-image: giá trị;
}

Trong đó:

  • -moz-animation hỗ trợ cho firefox.
  • -webkit-animation hỗ trợ cho Google Chrome và Safari.
  • -ms-animation hỗ trợ cho Internet Explorer.
  • -o-animation hỗ trợ cho Opera.

Thuộc tính của border image trong css3:

Thuộc tínhgiá trịMô tả
Border image
border-image-sourceurlĐường dẫn tới image dùng làm border.
border-image-slice (Giá trị % hoặc số)1 giá trị [top right bottom left]Phần lát cắt image với 4 thành phần của border như nhau.
2 giá trị [top bottom] [left right]Phần lát cắt image với 2 thành phần ngang của border như nhau và 2 thành phần dọc cũng như nhau.
3 giá trị [top] [left right] [bottom]Phần lát cắt image với thành phần dọc của border như nhau.
4 giá trị [top] [right] [bottom] [left]Phần lát cắt image với 4 thành phần của border khác nhau.
border-image-width (Giá trị theo đơn vị)1 giá trị [top right bottom left]Bề rộng image với 4 thành phần của border như nhau.
2 giá trị [top bottom] [left right]Bề rộng image với 2 thành phần ngang của border như nhau và 2 thành phần dọc cũng như nhau.
3 giá trị [top] [left right] [bottom]Bề rộng image với thành phần dọc của border như nhau.
4 giá trị [top] [right] [bottom] [left]Bề rộng image với 4 thành phần của border khác nhau.
border-image-outset (Giá trị theo đơn vị)1 giá trị [top right bottom left]Xác định giá trị image vượt ra ngoài vùng giới hạn của vùng bao, với 4 thành phần của border vượt ra ngoài như nhau.
2 giá trị [top bottom] [left right]Xác định giá trị image vượt ra ngoài vùng giới hạn của vùng bao, với 2 thành phần ngang của border vượt ra ngoài như nhau và 2 thành phần dọc cũng như nhau.
3 giá trị [top] [left right] [bottom]Xác định giá trị image vượt ra ngoài vùng giới hạn của vùng bao, với thành phần dọc của border như nhau.
4 giá trị [top] [right] [bottom] [left]Xác định giá trị image vượt ra ngoài vùng giới hạn của vùng bao, với 4 thành phần của border khác nhau.
border-image-repeat Chú ý: border-image-repeat không có nghĩa khi sử dụng 3 giá trị trở lên.repeatImage của border sẽ được lặp lại, cả phần nội dung và phần border.
roundImage của border sẽ được lặp lại, cả phần nội dung và phần border, tuy nhiên vùng lặp sẽ tự động tỷ lệ cho phù hợp với vùng bao.
stretchImage của border sẽ được kéo dài, nếu border-image-repeat không khai báo thì border image sẽ có dạng stretch.
border-imagesource slice / width / outset repeatTổng hợp của các dạng border-image trên.

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>border image</p>
</body>
</html>

CSS viết:

p {
/* Safari and Chrome */
-webkit-border-image-source: url(images/border.png);
-webkit-border-image-slice: 30;
-webkit-border-image-width: 10px 20px;
-webkit-border-image-outset: 0 10px 10px 30px;
-webkit-border-image-repeat: round;

/* Firefox */
-moz-border-image-source: url(images/border.png);
-moz-border-image-slice: 30;
-moz-border-image-width: 10px 20px;
-moz-border-image-outset: 0 10px 10px 30px;
-moz-border-image-repeat: round;

/* Internet Explorer */
-ms-border-image-source: url(images/border.png);
-ms-border-image-slice: 30;
-ms-border-image-width: 10px 20px;
-ms-border-image-outset: 0 10px 10px 30px;
-ms-border-image-repeat: round;

/* Opera */
-o-border-image-source: url(images/border.png);
-o-border-image-slice: 30;
-o-border-image-width: 10px 20px;
-o-border-image-outset: 0 10px 10px 30px;
-o-border-image-repeat: round;

/* CSS3 */
border-image-source: url(images/border.png);
border-image-slice: 30;
border-image-width: 10px 20px;
border-image-outset: 0 10px 10px 30px;
border-image-repeat: round;
}

Ta có thể viết gọn lại như sau, CSS viết:

p {
/* Safari and Chrome */
-webkit-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* Firefox */
-moz-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* Internet Explorer */
-ms-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* Opera */
-o-border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;

/* CSS3 */
border-image: url(images/border.png) 30 / 10px 20px / 0 10px 10px 30px round;
}

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính border-image:

Thuộc tính border-image 1



Bình luận