HTML DOM Style backgroundClip屬性用法及代碼示例

backgroundClip 屬性讓我們可以控製背景圖像將被繪製多遠，即背景圖像的繪製區域。它用於設置或返回該繪畫區域。

用法

以下是語法 -

設置 backgroundClip 屬性 -

background-clip:border-box | padding-box | content-box

值

以下是值 -

Sr.No	值和描述
1	border-box 這將剪輯 border-box 內的背景，這是默認值。
2	padding-box 這會剪輯填充框內的背景。
3	content-box 背景被剪裁在內容框中。

示例

讓我們看一個 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="The background clip property is now padding-box";
      background-clip:border-box | padding-box | content-box
   }
</script>
</head>
<body>
<div id="one">
Phasellus eu justo lectus. Praesent et nulla facilisis, venenatis justo eget, tempor lectus.
Integer ut felis vel lectus convallis fermentum. Fusce ut felis mauris.</div>
<p>Change the above div background-clip value by clicking the below button</p>
<button onclick="changeBackClip()">CHANGE CLIP</button>
<p id="Sample"></p>
</body>
</html>

輸出

這將產生以下輸出 -

單擊“更改剪輯”按鈕 -

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Style backgroundClip Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。