background-clip：用来确定背景的裁剪区域。
background-clip是css3.0中新增加的属性，一般喜欢将 background-clip与 background-origin和 background-size一起应用。其中 background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。 background-clip 用来确定背景的裁剪区域。而 background-origin 用来决 定 background-position 计算的参考位置。
上图效果：background-clip:content(其中在火狐浏览器不支持)
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
</style>
</head>
<body>
<div class="back"></div>
</body>
</html>
(1). background-clip:padding，没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}
(2). background-clip:border， 没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}
背景颜色填充到border中。
然后我们在看看添加背景图片时效果是什么样的？
先上背景图片（img.jpg）
(3). background-clip:content， 没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
这种效果仅仅在Safari和Chrome浏览器得到实现，超出content部分背景图片以及背景颜色就会被减掉
(4). background-clip:padding， 没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}
只要超出padding部分，背景图片和颜色就会被减掉
(5). background-clip:border， 没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed ;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}
只要超出border部分，背景图片和颜色就会被减掉
一般来说如果仅仅单独对background-clip进行设置使用的话，起到的作用不大，为了一些效果我们经常会将background-clip 和 background-origin 合起来一起使用。
background-clip是css3.0中新增加的属性，一般喜欢将 background-clip与 background-origin和 background-size一起应用。其中 background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。 background-clip 用来确定背景的裁剪区域。而 background-origin 用来决 定 background-position 计算的参考位置。
-
首先
background-clip在浏览器兼容性:
- IE和遨游不支持(不知IE9是否支持)。
- Firefox添加 私有属性-moz-background-clip支持。
- Safari和Chrome添加私有属性-webkit-background-clip支持。
- Opera: 不支持background-clip属性，添加其私有属性-o-background-clip也不支持。
-
border：从border区域向外裁剪掉背景。（超出部分就被减掉）
padding：从padding区域向外裁剪掉背景。 （超出部分就被减掉）
content：从content区域向外裁剪掉背景。（超出部分就被减掉）
上图效果：background-clip:content(其中在火狐浏览器不支持)
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
</style>
</head>
<body>
<div class="back"></div>
</body>
</html>
(1). background-clip:padding，没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}
(2). background-clip:border， 没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}
背景颜色填充到border中。
然后我们在看看添加背景图片时效果是什么样的？
先上背景图片（img.jpg）
(3). background-clip:content， 没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
这种效果仅仅在Safari和Chrome浏览器得到实现，超出content部分背景图片以及背景颜色就会被减掉
(4). background-clip:padding， 没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed #333;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip:padding;}
只要超出padding部分，背景图片和颜色就会被减掉
(5). background-clip:border， 没有位移，边框20px、虚线、颜色#333，padding值为20px
效果：
修改css：
.back{
width:120px;
height:100px;
border: 20px dashed ;
padding: 20px;
background: #ccc url(img.jpg) no-repeat;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border;}
只要超出border部分，背景图片和颜色就会被减掉
一般来说如果仅仅单独对background-clip进行设置使用的话，起到的作用不大，为了一些效果我们经常会将background-clip 和 background-origin 合起来一起使用。
2191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
