Thuộc tính backgroundClip giới hạn vùng vẽ của hình nền/màu nền: có vẽ đến viền (border-box), đến padding (padding-box), hoặc chỉ trong nội dung (content-box).
Cú pháp
object.style.backgroundClip = "border-box|padding-box|content-box|initial|inherit"
Các giá trị
| Giá trị | Mô tả |
|---|---|
| border-box | Vẽ nền phủ kín cả vùng viền (mặc định). |
| padding-box | Vẽ nền đếnpadding, không phủ viền. |
| content-box | Chỉ vẽ nền trong vùng nội dung. |
| initial | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Thay đổi backgroundClip:
<!DOCTYPE html> <html> <head> <style>
#one {
box-shadow: 0 0 2px black;
padding: 18px;
background: skyblue;
background-clip: content-box;
}
</style>
<script>
function changeBackClip(){
document.getElementById("one").style.backgroundClip = "padding-box";
document.getElementById("Sample").innerHTML = "Background clip giờ là padding-box";
}
</script> </head>
<body>
<div id="one">Nội dung văn bản...</div>
<p>Nhấn nút để thay đổi background-clip</p>
<button onclick="changeBackClip()">THAY ĐỔI CLIP</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Ban đầu clip = content-box (nền chỉ trong vùng text):
Sau khi nhấn nút, clip = padding-box (nền mở rộng ra vùng padding):
