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í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. |
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:
