CSS3 background-clip属性怎样用？【css教程】,background-clip属性,CSS3

background-clip属性用于指定元素背景地点的地区,，能够指定：边框之内的地区、padding之内地区、内容之内的地区。

CSS background-clip属性

作用：划定背景的绘制地区。

语法：

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

属性值：

●　border-box：背景被裁剪到边框盒，即边框之内的地区。

●　padding-box：背景被裁剪到内边距框，即padding之内地区。

●　content-box：背景被裁剪到内容框，即内容之内的地区。

注：Internet Explorer 8 以及更早的版本不支持 background-clip 属性。

CSS background-clip属性的运用示例

<!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>

效果图：