Web速查-索引

Alt text

定义

background-clip属性指定背景绘制区域。

语法

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

属性值

说明
border-box 默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box 背景绘制在衬距方框内(剪切成衬距方框)。
content-box 背景绘制在内容方框内(剪切成内容方框)。

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style>
#example1 {
border: 10px solid black;
padding:33px;
background: green;
}
#example2 {
border: 10px solid black;
padding:33px;
background: green;
background-clip: padding-box;
}
#example3 {
border: 10px solid black;
padding:33px;
background: green;
background-clip: content-box;
}
</style>
</head>
<body>
<p>未设置 background-clip :</p>
<div id="example1">
<h2>www.fishc.com</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<h2>www.fishc.com</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<h2>www.fishc.com</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>

未设置 background-clip :

www.fishc.com

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

background-clip: padding-box:

www.fishc.com

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

background-clip: content-box:

www.fishc.com

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
6.0 16.0 15.0 11.0