在CSS3中，使用background-clip屬性來將背景圖片根據實際需要進行剪切。
語法：
background-clip:屬性值;
說明：
background-clip屬性取值如下表：
background-clip屬性還有一個取值為no-clip，與border-box顯示同樣效果，沒什麼卵用，在此不列出來增加大家記憶負擔。
background-clip屬性指定了背景在哪些區域可以顯示，但與背景開始繪制的位置（即background-origin屬性）無關。背景繪制的位置可以出現在不顯示背景的區域。這就相當於背景圖片被不顯示背景的區域裁剪了一部分一樣。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 background-clip屬性</title>
<style type="text/css">
body
{
font-family:微軟雅黑;
font-size:14px;
}
#view
{
display:inline-block;
width:400px;
padding:15px;
font-size:15px;
border:15px dashed #F1F1F1;
background-image:url("../App_images/lesson/run_css3/mingren.png");
background-origin:border-box;
background-repeat:no-repeat;
background-clip:border-box;
}
</style>
<script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#ckb1").click(function () {
$("#view").css("background-clip", "border-box");
});
$("#ckb2").click(function () {
$("#view").css("background-clip", "padding-box");
});
$("#ckb3").click(function () {
$("#view").css("background-clip", "content-box");
});
})
</script>
</head>
<body>
<div id="select">
background-clip：
<input id="ckb1" name="group" type="radio" value="border-box" checked="checked"/><label for="ckb1">border-box</label>
<input id="ckb2" name="group" type="radio" value="padding-box"/><label for="ckb2">padding-box</label>
<input id="ckb3" name="group" type="radio" value="content-box"/><label for="ckb3">content-box</label>
</div>
<div id="view">
學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網， 學習網。
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡首先使用“background-origin:border-box;”定義背景圖片從邊框開始平鋪，然後這裡做了一個小程序，大家可以動態觀察當background-clip屬性值變化時的實際效果。
注意：此例子請在火狐浏覽器下測試，否則無法查看動態效果。