Thuộc tính border-image-repeat trong CSS
Bùi Tấn Lực - 850
- 07/10/2025
Chức năng của Thuộc tính border-image-repeat trong CSS
Thuộc tính border-image-repeat trong CSS dùng để quy định cách chia các ô, khoảng trống, cách sắp xếp của hình ảnh dùng làm đường viền trên phần tử HTML.
Cú pháp của Thuộc tính border-image-repeat trong CSS
border-image-repeat: cach;
cach: Cách chia các ô, khoảng trống, cách sắp xếp của hình ảnh (stretch, repeat, round, space)
Code Thuộc tính border-image-repeat trong CSS
border-image-repeat: stretch ; (Hình ảnh được kéo dài để lấp đầy khu vực)
border-image-repeat: repeat ; (Hình ảnh được xếp chồng lên nhau để lấp đầy khu vực, thậm chí có thể chia các ô ra)
border-image-repeat: round ; (Hình ảnh được xếp chồng lên nhau để lấp đầy khu vực, không chia các ô nhưng điều chỉnh kích thước)
border-image-repeat: space ; (Hình ảnh được xếp chồng lên nhau để lấp đầy khu vực, thậm chí bổ sung thêm khoảng trống xung quanh các ô để lấp đầy)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-image-repeat trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height:auto; border: 10px solid transparent;
padding: 15px; margin-bottom:15px; border-image-slice: 30;border-image-source: url('https://webmoi.vn/thumuc/border-hinh.png');
}
</style>
</head>
<body>
<h1>Code Thuộc tính border-image-repeat trong CSS</h1>
<p>Dùng để quy định cách chia các ô, khoảng trống, cách sắp xếp của hình ảnh dùng làm đường viền trên phần tử HTML:</p>
<div style="border-image-repeat: stretch;">border-image-repeat: stretch; (Hình ảnh được kéo dài để lấp đầy khu vực)</div>
<div style="border-image-repeat: repeat;">border-image-repeat: repeat; (Hình ảnh được xếp chồng lên nhau để lấp đầy khu vực, thậm chí có thể chia các ô ra)</div>
<div style="border-image-repeat: round;">border-image-repeat: round; (Hình ảnh được xếp chồng lên nhau để lấp đầy khu vực, không chia các ô nhưng điều chỉnh kích thước)</div>
<div style="border-image-repeat: space;">border-image-repeat: space; (Hình ảnh được xếp chồng lên nhau để lấp đầy khu vực, thậm chí bổ sung thêm khoảng trống xung quanh các ô để lấp đầy)</div>
<p><b>Hình gốc:</b></p>
<p><img src="https://webmoi.vn/thumuc/border-hinh.png"></p>
</body>
</html>
Cách kết hợp border-image-repeat với các thuộc tính border-image khác
border-image-repeat phát huy hiệu quả rõ nhất khi được sử dụng cùng các thuộc tính khác trong nhóm border-image. Mỗi thuộc tính đảm nhận một phần riêng: nguồn ảnh cung cấp họa tiết, cách cắt xác định vùng ảnh dùng làm viền, kích thước quyết định độ dày và border-image-repeat quy định cách phân bổ họa tiết trên các cạnh.
Hiểu được mối liên hệ này giúp bạn kiểm soát đường viền bằng hình ảnh chính xác hơn, đặc biệt khi cần tạo khung có họa tiết lặp lại thay vì kéo giãn ảnh trên toàn bộ cạnh.
Kết hợp border-image-repeat với border-image-source
border-image-source xác định hình ảnh được sử dụng làm nguồn cho đường viền, còn border-image-repeat quyết định cách phần hình ảnh sau khi cắt được phân bố trên các cạnh.
Chẳng hạn, nếu nguồn ảnh chứa một họa tiết nhỏ có thể lặp lại, việc đặt border-image-repeat: repeat; sẽ giúp họa tiết xuất hiện liên tiếp thay vì bị kéo dài. Cách này phù hợp với các kiểu khung trang trí có hoa văn đều nhau.
.box {
border: 20px solid transparent;
border-image-source: url(border.png);
border-image-slice: 30;
border-image-repeat: repeat;
}
Trong trường hợp muốn hình ảnh phủ kín cạnh mà không xuất hiện khoảng trống, bạn có thể cân nhắc round để trình duyệt điều chỉnh số lần lặp theo chiều dài cạnh.
Kết hợp border-image-repeat với border-image-slice
border-image-slice xác định cách chia hình ảnh nguồn thành các vùng để sử dụng cho đường viền. Vì vậy, giá trị của thuộc tính này ảnh hưởng trực tiếp đến phần họa tiết mà border-image-repeat sẽ lặp lại.
Nếu cắt sai vị trí, họa tiết có thể bị thiếu, lệch hoặc không liền mạch dù đã chọn chế độ lặp phù hợp. Khi thiết kế ảnh viền, nên xác định vùng cắt trước rồi mới lựa chọn cách phân bố bằng border-image-repeat.
.frame {
border: 16px solid transparent;
border-image-source: url(frame.png);
border-image-slice: 24;
border-image-repeat: round;
}
Với ảnh có họa tiết đối xứng hoặc được thiết kế để ghép nối, việc phối hợp đúng hai thuộc tính này giúp đường viền giữ được tính liên tục trên cả bốn cạnh.
Kết hợp border-image-repeat với border-image-width và border-image-outset
border-image-width kiểm soát độ rộng của vùng ảnh được dùng để hiển thị đường viền, trong khi border-image-outset cho phép phần đường viền hình ảnh mở rộng ra ngoài phạm vi hộp phần tử.
Khi kết hợp với border-image-repeat, bạn có thể kiểm soát đồng thời cách họa tiết lặp lại, độ dày của vùng viền và vị trí hiển thị của viền.
.card {
border: 12px solid transparent;
border-image-source: url(pattern.png);
border-image-slice: 20;
border-image-width: 16px;
border-image-outset: 4px;
border-image-repeat: round;
}
Cần lưu ý rằng tăng border-image-width hoặc border-image-outset không thay đổi cách họa tiết được lặp lại. Hai thuộc tính này chỉ tác động đến kích thước và vị trí của vùng hiển thị, còn nhiệm vụ phân bố họa tiết vẫn thuộc về border-image-repeat.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-image-repeat trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
