CSS3之背景background-clip

1.使用方法:

background-clip用来将背景图片做适当的裁剪以适应实际需要。

语法:

background-clip:border-box|padding-box|content-box|no-clip;

参数分别表示从边框(border-box),或内填充(padding-box),或者内容区域向外裁剪背景(content-box)。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

2.1、border-box代码示例:

.wrap{

width:250px;

height:250px;

border:10px dashed #999;

text-align:center;

padding:30px;

background:url(/images/portal/lan16_icon.png);

background-repeat:no-repeat;

background-origin:border-box;

background-clip:border-box;

}

.content-div{

width:150px;

height:150px;

border:1px solid #000;

}

效果如下

2.2、padding-box代码示例:

.wrap{

width:250px;

height:250px;

border:10px dashed #999;

text-align:center;

padding:30px;

background:url(/images/portal/lan16_icon.png);

background-repeat:no-repeat;

background-origin:border-box;

background-clip:padding-box;

}

.content-div{

width:150px;

height:150px;

border:1px solid #000;

}

效果如下

2.3、content-box代码示例:

.wrap{

width:250px;

height:250px;

border:10px dashed #999;

text-align:center;

padding:30px;

background:url(/images/portal/lan16_icon.png);

background-repeat:no-repeat;

background-origin:border-box;

background-clip:content-box;

}

.content-div{

width:150px;

height:150px;

border:1px solid #000;

}

效果如下