CSS3中的background-clip属性怎么用-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

CSS3中的background-clip属性的用法：【background-clip:border-box|padding-box|content-box】。background-clip属性用于规定背景的绘制区域。

CSS background-clip属性

作用：规定背景的绘制区域。

（推荐教程：CSS教程）

语法：

1	`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>