Thuộc tính border-image-source
Thuộc tính border-image-source : Đường dẫn tới image dùng làm border.
HTML viết:
<html> <head></head> <body> <p>border image</p> </body> </html>
CSS viết:
p {
height: 50px;
/* Safari and Chrome */
-webkit-border-image-source: url(images/border.png);
-webkit-border-image-slice: 30;
-webkit-border-image-width: 10px;
-webkit-border-image-outset: 0;
-webkit-border-image-repeat: round;
/* Firefox */
-moz-border-image-source: url(images/border.png);
-moz-border-image-slice: 30;
-moz-border-image-width: 10px;
-moz-border-image-outset: 0;
-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;
-ms-border-image-outset: 0;
-ms-border-image-repeat: round;
/* Opera */
-o-border-image-source: url(images/border.png);
-o-border-image-slice: 30;
-o-border-image-width: 10px;
-o-border-image-outset: 0;
-o-border-image-repeat: round;
/* CSS3 */
border-image-source: url(images/border.png);
border-image-slice: 30;
border-image-width: 10px;
border-image-outset: 0;
border-image-repeat: round;
}
Ta có thể viết gọn lại như sau:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 0 round;
-moz-border-image: url(images/border.png) 30 / 10px / 0 round;
-ms-border-image: url(images/border.png) 30 / 10px / 0 round;
-o-border-image: url(images/border.png) 30 / 10px / 0 round;
border-image: url(images/border.png) 30 / 10px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Thuộc tính border-image-slice 1 giá trị
Thuộc tính border-image-slice 1 giá trị: Phần lát cắt image với 4 thành phần của border như nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 10 / 10px / 0 round;
-moz-border-image: url(images/border.png) 10 / 10px / 0 round;
-ms-border-image: url(images/border.png) 10 / 10px / 0 round;
-o-border-image: url(images/border.png) 10 / 10px / 0 round;
border-image: url(images/border.png) 10 / 10px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Thuộc tính border-image-slice 2 giá trị
Thuộc tính border-image-slice 2 giá trị: 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.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 10 15 / 10px / 0 round;
-moz-border-image: url(images/border.png) 10 15 / 10px / 0 round;
-ms-border-image: url(images/border.png) 10 15 / 10px / 0 round;
-o-border-image: url(images/border.png) 10 15 / 10px / 0 round;
border-image: url(images/border.png) 10 15 / 10px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy hình dạng border bên trên và dưới có phần lát cắt image giống nhau, hình dạng border bên trái và bên phải có phần lát cắt giống nhau.
Thuộc tính border-image-slice 3 giá trị
Thuộc tính border-image-slice 3 giá trị: Phần lát cắt image với thành phần dọc của border như nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 10 15 20 / 10px / 0 round;
-moz-border-image: url(images/border.png) 10 15 20 / 10px / 0 round;
-ms-border-image: url(images/border.png) 10 15 20 / 10px / 0 round;
-o-border-image: url(images/border.png) 10 15 20 / 10px / 0 round;
border-image: url(images/border.png) 10 15 20 / 10px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy hình dạng border bên trái và bên phải có phần lát cắt image giống nhau.
Thuộc tính border-image-slice 4 giá trị
Thuộc tính border-image-slice 4 giá trị: Phần lát cắt image với 4 thành phần của border khác nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
-moz-border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
-ms-border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
-o-border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
border-image: url(images/border.png) 10 15 20 25 / 10px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy hình dạng border cả 4 phía đều có dạng lát cắt khác nhau.
Thuộc tính border-image-width 1 giá trị
Thuộc tính border-image-width 1 giá trị : Bề rộng image với 4 thành phần của border như nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 30px / 0 round;
-moz-border-image: url(images/border.png) 30 / 30px / 0 round;
-ms-border-image: url(images/border.png) 30 / 30px / 0 round;
-o-border-image: url(images/border.png) 30 / 30px / 0 round;
border-image: url(images/border.png) 30 / 30px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy bề rộng border của 4 thành phần đều như nhau.
Thuộc tính border-image-width 2 giá trị
Thuộc tính border-image-width 2 giá trị : 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.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 30px 20px / 0 round;
-moz-border-image: url(images/border.png) 30 / 30px 20px / 0 round;
-ms-border-image: url(images/border.png) 30 / 30px 20px / 0 round;
-o-border-image: url(images/border.png) 30 / 30px 20px / 0 round;
border-image: url(images/border.png) 30 / 30px 20px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy bề rộng border của thành phần trên và dưới bằng nhau, bề rộng của thành phần trái và phải cũng bằng nhau.
Thuộc tính border-image-width 3 giá trị
Thuộc tính border-image-width 3 giá trị : Bề rộng image của thành phần trái và phải bằng nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 30px 20px 10px / 0 round;
-moz-border-image: url(images/border.png) 30 / 30px 20px 10px / 0 round;
-ms-border-image: url(images/border.png) 30 / 30px 20px 10px / 0 round;
-o-border-image: url(images/border.png) 30 / 30px 20px 10px / 0 round;
border-image: url(images/border.png) 30 / 30px 20px 10px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy bề rộng border của thành phần trái và phải bằng nhau.
Thuộc tính border-image-width 4 giá trị
Thuộc tính border-image-width 4 giá trị : Bề rộng image của 4 thành phần khác nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
-moz-border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
-ms-border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
-o-border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
border-image: url(images/border.png) 30 / 30px 20px 10px 40px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy bề rộng border của 4 thành phần khác nhau.
Thuộc tính border-image-outset 1 giá trị
Thuộc tính border-image-outset 1 giá trị : 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.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 10px round;
-moz-border-image: url(images/border.png) 30 / 10px / 10px round;
-ms-border-image: url(images/border.png) 30 / 10px / 10px round;
-o-border-image: url(images/border.png) 30 / 10px / 10px round;
border-image: url(images/border.png) 30 / 10px / 10px round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy image border đã được mở rộng thêm 10px.
Thuộc tính border-image-outset 2 giá trị
Thuộc tính border-image-outset 2 giá trị : 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 trái và phải bằng nhau và 2 thành phần trên dưới bằng nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 10px 20px round;
-moz-border-image: url(images/border.png) 30 / 10px / 10px 20px round;
-ms-border-image: url(images/border.png) 30 / 10px / 10px 20px round;
-o-border-image: url(images/border.png) 30 / 10px / 10px 20px round;
border-image: url(images/border.png) 30 / 10px / 10px 20px round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy image border đã được mở rộng thành phần trên dưới thêm 10px, trái phải thêm 20px.
Thuộc tính border-image-outset 3 giá trị
Thuộc tính border-image-outset 3 giá trị : 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 trái và phải bằng nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px round;
-moz-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px round;
-ms-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px round;
-o-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px round;
border-image: url(images/border.png) 30 / 10px / 10px 20px 30px round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy image border đã được mở rộng thành phần trên thêm 10px, trái phải thêm 20px, dưới thêm 30px.
Thuộc tính border-image-outset 4 giá trị
Thuộc tính border-image-outset 4 giá trị : 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 khác nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
-moz-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
-ms-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
-o-border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
border-image: url(images/border.png) 30 / 10px / 10px 20px 30px 40px round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy image border đã được mở rộng thành phần trên thêm 10px, phải thêm 20px, dưới thêm 30px, trái thêm 40px.
Thuộc tính border-image-repeat với giá trị repeat
Thuộc tính border-image-repeat với giá trị repeat : Image của border sẽ được lặp lại, cả phần nội dung và phần border.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 0 repeat;
-moz-border-image: url(images/border.png) 30 / 10px / 0 repeat;
-ms-border-image: url(images/border.png) 30 / 10px / 0 repeat;
-o-border-image: url(images/border.png) 30 / 10px / 0 repeat;
border-image: url(images/border.png) 30 / 10px / 0 repeat;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy image border đã được lặp lại, cả phần nội dung và phần border.
Thuộc tính border-image-repeat với giá trị round
Thuộc tính border-image-repeat với giá trị 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.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 0 round;
-moz-border-image: url(images/border.png) 30 / 10px / 0 round;
-ms-border-image: url(images/border.png) 30 / 10px / 0 round;
-o-border-image: url(images/border.png) 30 / 10px / 0 round;
border-image: url(images/border.png) 30 / 10px / 0 round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy image border đã được lặp lại, cả phần nội dung và phần border, để ý ta 4 góc của border sẽ thấy vùng lặp đã được tỷ lệ phù hợp với vùng bao, không giống như khi dùng giá trị repeat.
Thuộc tính border-image-repeat với giá trị stretch
Thuộc tính border-image-repeat với giá trị 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.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 0 stretch;
-moz-border-image: url(images/border.png) 30 / 10px / 0 stretch;
-ms-border-image: url(images/border.png) 30 / 10px / 0 stretch;
-o-border-image: url(images/border.png) 30 / 10px / 0 stretch;
border-image: url(images/border.png) 30 / 10px / 0 stretch;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy image border đã được kéo dài.
Thuộc tính border-image-repeat với 2 giá trị
Thuộc tính border-image-repeat với 2 giá trị : Image của border sẽ được lặp lại với 2 thành phần trên và dưới giống nhau, trái và phải giống nhau.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 / 10px / 0 stretch round;
-moz-border-image: url(images/border.png) 30 / 10px / 0 stretch round;
-ms-border-image: url(images/border.png) 30 / 10px / 0 stretch round;
-o-border-image: url(images/border.png) 30 / 10px / 0 stretch round;
border-image: url(images/border.png) 30 / 10px / 0 stretch round;
}
Hiển thị trình duyệt khi có CSS:
border image
Ta thấy image border đã được lặp lại với thành phần trên và dưới giống nhau, trái và phải giống nhau.
Chú ý: border-image-repeat không có nghĩa khi sử dụng 3 giá trị trở lên.
Thuộc tính border-image
Thuộc tính border-image : Tổng hợp của các dạng border-image trên.
CSS viết:
p {
height: 50px;
-webkit-border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
-moz-border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
-ms-border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
-o-border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
border-image: url(images/border.png) 30 10 / 10px 20px 20px / 0 10px stretch round;
}
Hiển thị trình duyệt khi có CSS:
border image