Thuộc tính HTML DOM borderImageSlice được sử dụng để xác định cách hình ảnh đường viền được chia thành các vùng. Điều này được thực hiện bằng cách chỉ định độ lệch của hình ảnh đường viền theo tỷ lệ phần trăm, số hoặc giá trị toàn cục.
Sau đây là cú pháp cho -
Đặt thuộc tính borderImageSlice -
object.style.borderImageSlice = "number|%|fill|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| số | Nó được sử dụng để biểu thị các pixel trong hình ảnh raster hoặc tọa độ vectơ trong ảnh vectơ. |
| % | Chúng được sử dụng để chỉ định hiệu số ngang và dọc so với kích thước hình ảnh. Giá trị mặc định của nó là 100%. |
| ốm | Nó được sử dụng để giữ phần giữa hình ảnh đường viền. |
| tên đầu tiên | Để đặt thuộc tính này thành giá trị mặc định. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ. |
Chúng ta hãy xem một ví dụ cho thuộc tính borderImageSlice -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50%;
}
#b1 {
border: 30px solid transparent;
padding: 5px;
font-size:20px;
border-image: url("https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg");
border-image-slice: 60%;
}
</style>
<script>
function changeBorderSlice(){
document.getElementById("b1").style.borderImageSlice="10%";
document.getElementById("Sample").innerHTML="The border image slice is now changed";
}
</script>
</head>
<body>
<div id="b1">This is some sample text inside div</div>
<p>Change the above div border image slice…</p>
<button onclick="changeBorderSlice()">Change Border Slice</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào “Thay đổi đường viền” nút -
