Border Image - Tạo đường viền bằng hình trong CSS
Border Image trong CSS là việc thêm hình ảnh xuất hiện trên đường viền cho các phần tử. Bạn không cần sử dụng bất cứ HTML code nào để gọi Border Image.
Thuộc tính border-image trong CSS
Thuộc tính border-image trong CSS cho phép bạn chỉ định một hình ảnh sẽ sử dụng thay thế đường viền thông thường xung quanh một phần tử.
Thuộc tính có giá trị đi theo:
- Hình ảnh được sử dụng làm đường viền
- Nơi để cắt hình ảnh
- Xác định các phần được lặp đi lặp lại hoặc kéo dài.
Ở bài viết này, Quantrimang.com sẽ sử dụng hình ảnh sau có tên là "Border-image.png":
Thuộc tính border-image cắt hình ảnh thành chín phần kiểu như bảng cờ caro như sau:
Lúc này ta chú ý các phần 1, 3, 7, 9 là bốn góc và nó cố định, phần 5 là vị trí trung tâm và những phần còn lại sẽ bị ảnh hưởng bởi các giá trị như round, repeat hoặc stretch bạn chỉ định.
Ví dụ 1: Các phần giữa của hình ảnh được lặp lại để tạo đường viền:
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 30 round;
}
Ở ví dụ này, các phần giữa của hình ảnh được lặp lại để tạo thành đường viền.
Lưu ý: Internet Explorer 10 và các phiên bản cũ hơn không hỗ trợ thuộc tính border-image.
Code đầy đủ:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 30 round;
}
</style>
</head>
<body>
<h1>Thuộc tính border-image trong CSS</h1>
<p>Ở ví dụ này, các phần giữa của hình ảnh được lặp lại để tạo thành đường
viền:</p><p id="borderimg">border-image: url(border-image.png) 30 round;</p>
<p>Hình gốc:</p><img src="border-image.png">
<p><strong>Lưu ý: </strong>Internet Explorer 10 và các phiên bản cũ hơn không
hỗ trợ thuộc tính border-image.</p></body>
</html>
Ví dụ 2: Các phần giữa của hình ảnh được kéo dài để tạo đường viền.
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 30 stretch;
}
Ở ví dụ này, các phần giữa của hình ảnh được kéo dài để tạo thành đường viền.
Code đầy đủ:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 30 stretch;
}
</style>
</head>
<body>
<h1>Thuộc tính border-image trong CSS</h1>
<p>Ở ví dụ này, các phần giữa của hình ảnh được kéo dài để tạo thành đường
viền:</p><p id="borderimg" style="text-align: center;">border-image:
url(border-image.png) 30 stretch;</p><p>Hình gốc:</p><img src="border-image.png">
<p><strong>Lưu ý: </strong>Internet Explorer 10 và các phiên bản cũ hơn không
hỗ trợ thuộc tính border-image.</p></body>
</html>
Cắt lát Border Image để tạo đường viền mới lạ
Các cách cắt lát hình ảnh để làm đường viền khác nhau sẽ tạo nên rất nhiều mới lạ, thay đổi hoàn toàn giao diện của đường viền.
Lát cắt kiểu 1:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 50 round;
}
Lát cắt kiểu 2:
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 20% round;
}
Lát cắt kiểu 3:
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 30% round;
}
Code đầy đủ:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 30% round;
}
</style>
</head>
<body>
<h1>Thuộc tính border-image trong CSS</h1>
<p id="borderimg1">border-image: url(border-image.png) 50 round;</p>
<p id="borderimg2">border-image: url(border-image.png) 20% round;</p>
<p id="borderimg3">border-image: url(border-image.png) 30% round;</p>
<p><strong>Lưu ý: </strong>Internet Explorer 10 và các phiên bản cũ hơn không
hỗ trợ thuộc tính border-image.</p></body>
</html>
Bạn nên đọc
-
Căn chỉnh - Align trong CSS
-
9 lý do bạn nên trang bị một chút kiến thức về HTML và CSS
-
Hiệu ứng chuyển động Animation trong CSS
-
Thanh điều hướng - Navigation Bar trong CSS
-
Người mới bắt đầu học lập trình máy tính cần tập trung vào những gì?
-
Bảng mã màu chuẩn cho lập trình viên, nhà thiết kế
-
Tạo Button trong CSS
-
Gradient - màu biến đổi tuyến tính trong CSS
-
Cách tạo hiệu ứng khi rê chuột qua (hover) bằng CSS


Cũ vẫn chất
-
Các công thức đạo hàm và đạo hàm lượng giác đầy đủ nhất
Hôm qua -
Code All Star Tower Defense 08/02/2025 mới nhất, đổi gems và stardust
Hôm qua 3 -
Lời cảm ơn, tri ân thầy cô hay và xúc động
Hôm qua 1 -
Các câu lệnh trong Logo đầy đủ nhất 2025
Hôm qua 32 -
Cách điều chỉnh kích thước ô trong bảng Word bằng nhau
Hôm qua -
5 cách lấy kim cương miễn phí trong Free Fire
Hôm qua 3 -
Công thức tính diện tích xung quanh hình nón cụt, diện tích toàn phần hình nón cụt, thể tích hình nón cụt
Hôm qua -
Công thức tính diện tích xung quanh hình nón, diện tích toàn phần hình nón, thể tích hình nón, V nón
Hôm qua -
Thơ về hoa sen, câu nói về hoa sen hay và ý nghĩa
Hôm qua -
Lời chúc Tết Sếp hay, lời chúc mừng năm mới 2024 cho sếp ấn tượng
Hôm qua