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
-
Thuộc tính Opacity/Transparency 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
-
Form - Biểu mẫu trong CSS
-
Bảng mã màu chuẩn cho lập trình viên, nhà thiết kế
-
Một số thuộc tính xử lý Text trong CSS
-
Icon trong CSS
Cũ vẫn chất
-
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua -
15 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua