CSS3 - Hình ảnh đường viền
Thuộc tính CSS Border image được sử dụng để thêm hình ảnh boarder vào một số phần tử. Bạn không cần sử dụng bất kỳ mã HTML nào để gọi ảnh boarder. Cú pháp mẫu của ảnh boarder như sau:
#borderimg {
border: 10px solid transparent;
padding: 15px;
}Các giá trị thường được sử dụng nhất được hiển thị bên dưới:
| Sr.No. | Giá trị & Mô tả |
|---|---|
| 1 | border-image-source Được sử dụng để đặt đường dẫn hình ảnh |
| 2 | border-image-slice Được sử dụng để cắt hình ảnh nội trú |
| 3 | border-image-width Được sử dụng để đặt chiều rộng hình ảnh nội trú |
| 4 | border-image-repeat Được sử dụng để đặt hình ảnh nội trú làm tròn, lặp lại và kéo dài |
Thí dụ
Sau đây là ví dụ minh họa cách đặt hình ảnh làm đường viền cho các phần tử.
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>Nó sẽ tạo ra kết quả sau: