**background-clip**
* 描述:檢索或設置對象的背景向外裁剪的區域
* 版本:CSS3 新增屬性
* 繼承性:無
**語法**
```
background-origin:向外裁剪區域
```
向外裁剪區域
* padding-box:背景顯示到 padding (包含 padding),超出隱藏。
* border-box:背景顯示到 border (包含 border),超出隱藏。
* content-box:背景顯示到 content (包含 content),超出隱藏。
* text:根據內容的形狀 (如 : 文字) 作為裁剪區域向外裁剪。
**使用說明**
text 屬性值,目前僅支持 webkit,通過 text 屬性值可實現使用背景作為填充色之類的遮罩效果。
**代碼示例**
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-clicp</title>
<style>
#container{
width: 400px;
height: 400px;
border: 10px dotted;
background-color: #336600;
padding: 10px;
background-clip:border-box;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
```
效果圖

- 空白目錄
- CSS3專業名詞
- 復合屬性
- 繼承性
- CSS3背景
- background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-origin
- background-clip
- background-size
- CSS邊框
- border
- border-width
- border-style
- border-color
- border-top
- border-top-width
- border-top-style
- border-top-color
- border-right
- border-right-width
- border-right-style
- border-right-color
- border-bottom
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-left
- border-left-width
- border-left-style
- border-left-color
- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- CSS顏色
- color
- opacity
- CSS字體
- font
- font-style
- font-variant
- font-weight
- font-size
- font-family
- font-stretch
- font-size-adjust
- CSS定位
- position
- z-index
- clip