Thuộc tính border-image

Định nghĩa và sử dụng

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ính giá trị Mô tả
Border image
border-image-source url Đườ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.
repeat Image của border sẽ được lặp lại, cả phần nội dung và phần border.
round Image 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.
stretch Image 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-image source slice / width / outset repeat Tổng hợp của các dạng border-image trên.

HTML viết:

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

Hiển thị trình duyệt khi chưa có CSS:

border image

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;
}

Hiển thị trình duyệt khi có CSS:

border image

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;
}

Hiển thị trình duyệt khi có CSS:

border image

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:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
border-image 10 12
-moz-
12
-o-
20 5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
8