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
-
9 lý do bạn nên trang bị một chút kiến thức về HTML và CSS
-
Thanh điều hướng - Navigation Bar trong CSS
-
Một số thuộc tính xử lý Text trong CSS
-
Sử dụng bố cục trang Flexbox trong CSS
-
Form - Biểu mẫu 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ì?
-
Thuộc tính Display (inline-block) trong CSS
-
Thiết kế Layout - Bố cục website trong CSS
-
Bảng mã màu chuẩn cho lập trình viên, nhà thiết kế
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Remote Desktop Connection: Cách thiết lập chi tiết, 100% truy cập máy tính qua Internet thành công
Hôm qua 2 -
Cách tặng trang phục cho bạn bè trong Liên Quân
Hôm qua -
Cách tạo đường viền bảng trong Word
Hôm qua -
Python editor online
Hôm qua 2 -
Tổng hợp câu hỏi khó về tình yêu của con gái và bí kíp trả lời hoàn hảo cho các chàng
Hôm qua -
Những dòng stt cô gái mạnh mẽ hay nhất
Hôm qua -
Cách đổi số tiền thành chữ trong Excel, không cần add-in, hỗ trợ cả Excel 32-bit và 64-bit
Hôm qua 1 -
Cách bật báo biến động số dư trên Techcombank Mobile qua loa
Hôm qua -
'Hack' tựa game khủng long của Google Chrome để chú T-Rex của bạn trở nên bất tử và max speed
Hôm qua 57 -
Hướng dẫn toàn tập chỉnh sửa ảnh trong GIMP
Hôm qua