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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。