background-clip ： border-box | padding-box | content-box | no-clip
相关属性： background-origin | background-size
background-clip 指定区域向外裁剪背景【CSS3.0参考手册】
语法：
取值：
- border-box：
- 从border区域向外裁剪背景。
- padding-box：
- 从padding区域向外裁剪背景。
- content-box：
- 从content区域向外裁剪背景。
- no-clip：
- 从border区域向外裁剪背景。
说明：
用来确定背景的裁剪区域。
| 引擎类型 | Gecko | Webkit | Presto |
|---|---|---|---|
| background-clip | -moz-background-clip | -webkit-background-clip | -o-background-clip |
兼容性：
| (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4 |
| (×)IE7 | (√)Firefox 3.5 | |||
| (×)IE8 |
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>background-clip</title> </head> <body> <!-- background-clip: padding-box; 从填充（padding）区域开始显示背景颜色或图片 --> <div style="border: 20px dotted rgb(102, 102, 102); padding: 20px; background: #CCC; width: 300px; text-align: center; font-weight: bold; color: rgb(0, 0, 0); -moz-background-inline-policy: -moz-initial; -moz-background-clip: padding; -moz-background-origin: padding;background-clip: padding-box;float:left;">padding<div style="border: 1px solid rgb(51, 51, 51); height: 200px;">content</div></div> <!-- background-clip: padding-box; 从内容区域开始显示背景颜色或图片 --> <div style="border: 20px dotted rgb(102, 102, 102); padding: 20px; background: #CCC; width: 300px; text-align: center; font-weight: bold; color: rgb(0, 0, 0); -moz-background-inline-policy: -moz-initial; -moz-background-clip: padding; -moz-background-origin: padding;background-clip: content-box;">padding<div style="border: 1px solid rgb(51, 51, 51); height: 200px;">content</div></div> </body> </html>
来源：//作者：/更新时间：2013-01-10
顶
踩
相关文章：
- 高端大气简约的表格式样实例_蓝色紫色table css 样式_
- html颜色代码表大全_HTML背景颜色代码_html字体颜色表
- resize 调节元素尺寸大小【CSS3.0参考手册】
- text-overflow 文本溢出显示省略标记【CSS3.0参考手册
- text-shadow 文字阴影及模糊效果【CSS3.0参考手册】
- Multiple backgrounds 多重背景图象【CSS3.0参考手册
- background-size 设置背景图片的大小【CSS3.0参考手
- background-origin 指定区域显示背景【CSS3.0参考手册
- css z-index 失效 不好用 的解决方法
- box-shadow[css3.0参考手册]
