CSS3: Bao ảnh với border-image
Giải phóng thời gian, khai phóng năng lực
Với CSS3 cho phép bạn có thể tạo đường bao bằng ảnh bằng cách sử dụng thuộc tính border-image. Sau đây là bảng mô tả chi tiết cú pháp của thuộc tính border-image:
|
Thuộc tính |
Giá trị |
Mô tả |
|
border-image-source |
url |
Đường dẫn tới image dùng làm border. |
|
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. |
|
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. |
|
|
3 giá trị |
Phần lát cắt image với thành phần dọc của border như nhau. |
|
|
4 giá trị |
Phần lát cắt image với 4 thành phần của border khác nhau. |
|
|
border-image-width |
1 giá trị |
Bề rộng image với 4 thành phần của border như nhau. |
|
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. |
|
|
3 giá trị |
Bề rộng image với thành phần dọc của border như nhau. |
|
|
4 giá trị |
Bề rộng image với 4 thành phần của border khác nhau. |
|
|
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. |
|
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 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ị |
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ị |
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 |
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ụ 1: Tạo đường bao bằng ảnh cho phần tử <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div{
border:15px solid;
width:250px;
padding:10px 20px;
background:green;
color:white;
}
#round{
border-image:url(nguồn_ảnh) 30 30 round;
}
#stretch{
border-image:url(nguồn_ảnh) 30 30 stretch;
}
</style>
</head>
<body style="color:green; font-size:18px;">
Ảnh làm đường bao:<br>
<img src="nguồn_ảnh">
<p>Thuộc tính border-image sẽ tạo đường bao dưới dạng ảnh cho phần tử.</p>
<div id="round">Trong trường hợp này ảnh sẽ được lặp để phủ quanh phần tử.</div>
<br>
<div id="stretch">Còn trong trường hợp này ảnh sẽ được kéo giãn để phủ quanh phần tử.</div>
</body>
</html>
Ví dụ 2: Ví dụ này sẽ sử dụng các thuộc tính con của thuộc tính border-image để tạo đường bao bằng ảnh cho phần tử <p>.
<html>
<head>
<meta charset="utf-8" />
<style>
p{
width:50%;
height:80px;
text-align:center;
margin-left:50px;
padding-top:30px;
box-sizing:border-box;
background:green;
color:white;
/* Safari và Chrome */
-webkit-border-image-source: url(nguồn_ảnh);
-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(nguồn_ảnh);
-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(nguồn_ảnh);
-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(nguồn_ảnh);
-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(nguồn_ảnh);
border-image-slice: 30;
border-image-width: 20px 30px;
border-image-outset: 0 10px 10px 30px;
border-image-repeat: round;
}
</style>
</head>
<body>
<p>Sử dụng các thuộc tính con của thuộc tính border-image.</p>
</body>
</html>
Ví dụ 3: Ví dụ này sẽ thể hiện cú pháp tổng quát của thuộc tính border-image.
<html>
<head>
<meta charset="utf-8" />
<style>
p{
/* Cú pháp chuẩn */
border-image: url(nguồn_ảnh) 30 / 20px 30px / 0 10px 10px 30px round;
/* Safari và Chrome */
-webkit-border-image: url(nguồn_ảnh) 30 / 20px 30px / 0 10px 10px 30px round;
/* Firefox */
-moz-border-image: url(nguồn_ảnh) 30 / 20px 30px / 0 10px 10px 30px round;
/* Internet Explorer */
-ms-border-image: url(nguồn_ảnh) 30 / 20px 30px / 0 10px 10px 30px round;
/* Opera */
-o-border-image: url(nguồn_ảnh) 30 / 20px 30px / 0 10px 10px 30px round;
width:50%;
height:80px;
text-align:center;
margin-left:50px;
padding-top:15px;
box-sizing:border-box; color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>Cú pháp tổng hợp của thuộc tính border-image.</p><br>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực