<!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" />
<style>
div{
width:100px;
height:100px;
padding:20px;
background:url(2013-04-20_163737.jpg) no-repeat;
background-size:100%;
border:10px dotted #00F;
}
.p-box{ background-origin:padding-box;}
.c-box{ background-origin: content-box;}
.b-box{ background-origin:border-box;}
</style>
<title>无标题文档</title>
</head>
<body>
<p>这个是padding-box的想过</p>
<div class="p-box">
</div>
<br />
<p> 这个是content-box的想过</p>
<div class="c-box">
</div>
<br />
<p>这个是border-box的想过</p>
<div class="b-box">
</div>
</body>
</html>
| 值 | 描述 | 测试 |
|---|---|---|
| padding-box | 背景图像相对于内边距框来定位。 | 测试 |
| border-box | 背景图像相对于边框盒来定位。 | 测试 |
| content-box | 背景图像相对于内容框来定位。 | 测试 |
效果图：
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
