Thuộc tính border-image-slice trong CSS
Bùi Tấn Lực - 954
- 07/10/2025
Chức năng của Thuộc tính border-image-slice trong CSS
Thuộc tính border-image-slice trong CSS dùng để quy định các cách khác nhau để cắt hình ảnh dùng làm đường viền.
Cú pháp của Thuộc tính border-image-slice trong CSS
border-image-slice: cachcat;
cachcat: Cách cắt hình ảnh dùng làm đường viền (10, 20, 10%, 20%, 10% fill,...)
Code Thuộc tính border-image-slice trong CSS
border-image-slice: 20;
border-image-slice: 30%;
border-image-slice: 10% fill;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-image-slice 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-source: url('https://webmoi.vn/thumuc/border-hinh.png');border-image-repeat: round;
}
</style>
</head>
<body>
<h1>Code Thuộc tính border-image-slice trong CSS</h1>
<p>Dùng để quy định các cách khác nhau để cắt hình ảnh dùng làm đường viền:</p>
<div style="border-image-slice: 10;">border-image-slice: 10;</div>
<div style="border-image-slice: 20;">border-image-slice: 20;</div>
<div style="border-image-slice: 30;">border-image-slice: 30;</div>
<div style="border-image-slice: 10%;">border-image-slice: 10%;</div>
<div style="border-image-slice: 20%;">border-image-slice: 20%;</div>
<div style="border-image-slice: 30%;">border-image-slice: 30%;</div>
<div style="border-image-slice: 10% fill;">border-image-slice: 10% fill;</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-slice với các thuộc tính border-image khác
border-image-slice xác định cách hình ảnh được chia thành các vùng để tạo đường viền. Tuy nhiên, để kiểm soát đầy đủ cách đường viền xuất hiện, thuộc tính này thường cần phối hợp với các thuộc tính khác trong nhóm border-image. Cách kết hợp phù hợp giúp hình ảnh viền giữ được tỷ lệ, kích thước và cách lặp như mong muốn.
Kết hợp border-image-slice 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-slice quyết định cách cắt hình ảnh đó thành các phần. Hai thuộc tính này thường đi cùng nhau khi muốn tạo đường viền bằng hình ảnh thay vì màu sắc đơn thuần.
Ví dụ, hình ảnh được chia thành bốn cạnh và bốn góc bằng giá trị 30:
.box {
border: 20px solid transparent;
border-image-source: url("border.png");
border-image-slice: 30;
}
Trong trường hợp này, trình duyệt lấy hình ảnh từ border-image-source, sau đó dùng giá trị của border-image-slice để xác định vị trí cắt. Vì vậy, nếu thay đổi giá trị slice, hình dạng và phần hình ảnh xuất hiện trên đường viền cũng có thể thay đổi.
Kết hợp border-image-slice với border-image-repeat
border-image-repeat kiểm soát cách các phần hình ảnh sau khi cắt được xử lý trên cạnh của phần tử. Khi kết hợp với border-image-slice, bạn có thể quyết định phần hình ảnh ở giữa mỗi cạnh được kéo giãn, lặp lại hoặc xử lý theo kiểu phản chiếu.
Ví dụ:
.box {
border: 20px solid transparent;
border-image-source: url("border.png");
border-image-slice: 30;
border-image-repeat: repeat;
}
Ở đây, hình ảnh được chia theo giá trị 30, sau đó các phần thích hợp được lặp lại để phủ lên cạnh. Cách này phù hợp với những mẫu viền có họa tiết cần duy trì thay vì kéo dài một đoạn hình ảnh duy nhất.
Kết hợp border-image-slice với border-image-width
border-image-width xác định độ rộng của vùng hình ảnh được dùng để hiển thị đường viền. Trong khi đó, border-image-slice quyết định cách cắt nguồn hình ảnh. Hai thuộc tính này có vai trò khác nhau nhưng bổ trợ trực tiếp cho nhau.
Ví dụ:
.box {
border: 10px solid transparent;
border-image-source: url("border.png");
border-image-slice: 30;
border-image-width: 20px;
}
Giá trị 30 xác định vùng cắt từ ảnh nguồn, còn 20px quy định độ rộng hiển thị của hình ảnh ở khu vực đường viền. Nếu đường viền hiển thị quá mỏng hoặc quá dày dù cách cắt ảnh đã phù hợp, border-image-width là thuộc tính nên kiểm tra.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-image-slice 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 *
