?? ??
? ??? CSS3? ??? ?????. ?? ?? ???? ??? ??(?? ?? ??? IE ????? ??)? ??? ??? ??? CSS3? ??? ? ????. ??? ?? ??? ?? ??? ?????. ? ??.
?? ??:
background-origin:border-box|padding-box|content-box
????? ?? ?? ???? ???, ??(???) ?? ??? ???? ????? ??? ?????.
? ??? ?? ??? ?? ???? ???? ???? ??? ???? ? ?????. ?? ?? ???? ???? ???? ??? ?? ?? ???? ????. ???.
1.border-box:
? ?? ?? ??? ??(??? ??)?? ?? ???? ???? ?????. ?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.border-box
{
background-origin:border-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="border-box"></li>
</ul>
</body>
</html>? ???? ? ? ??? ??? ??? ???? ????? ?? ???? ??????.
2.padding-box:
?? ??? ???? ???? ?? ???? ???? ???? ????. ?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn" />
<title>background-origin屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.padding-box
{
background-origin:padding-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="padding-box"></li>
</ul>
</body>
</html>?? ? ????? ?? ???? ?? ???? ?????.
Three.content-box:
? ?? ?? ??? ???? ?? ???? ??? ?? ?????. ?? ??? ??? ?? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.content-box
{
background-origin:content-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="content-box"></li>
</ul>
</body>
</html>? ??? ??? ?? ? ? ??? ??? ???? ?? ???? ?????.
??? ?? ??? ???? ???? ??? ???? ??? ? ?? ??? ??? ??? ?? ?? ???? ?????? ???? ??? ??? ???? ???. ??? ?? ? ?? ?? ??? ??? ???? ? ???? ? ?? ???? ????.
