CSS background-clip 属性
CSS background-clip 属性 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
如果没有设置背景图片（background-image）或背景颜色（background-color），那么这个属性只有在边框（ border）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 border-style 或 border-image 有关），否则，本属性产生的样式变化会被边框覆盖。
实例
规定背景的绘制区域：
<!DOCTYPE html><html><head><style>div{width:300px;height:300px;padding:50px;background-color:yellow;background-clip:content-box;border:2px solid #92b901;}</style></head><body><div>这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div></body></html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
定义和用法
background-clip 属性规定背景的绘制区域。
| 默认值： | border-box |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.backgroundClip="content-box" |
语法
background-clip: border-box|padding-box|content-box;
| 值 | 描述 | 测试 |
|---|---|---|
| border-box | 背景被裁剪到边框盒。 | 测试 |
| padding-box | 背景被裁剪到内边距框。 | 测试 |
| content-box | 背景被裁剪到内容框。 | 测试 |
相关页面
CSS3 教程：CSS3 背景