?? ??
? ?? ??? ?? ?? ???? ???? ??? ? ?????.
?? ??:
?? ??: border-box|padding-box|content-box|no-clip
? ??? ?? ???? ??? ? ?? ??? ???? ? ?????. ?? ??? ? ?? ??? ?? ?? ?? ?????.
1. border-box ??:
??? ?? ??? ?? ???? ??? ? ??? ???? ?? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:150px;
height:100px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.border-box{
background-clip: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> ? ??? ??? ?? ??? ???? ?? ???? ????? ?? ? ?? ????? ?? ???? ???? ?? ?? ? ? ????. ?? background-origin ??? ?? ???? ?????. ??? ?? ???? ???? ??? ?????. ?? ????? ?? ??? ?????(?? ??).
2. padding-box ??:
? ??? ?? ?? ??? ?? ???? ??? ? ??? ?????. ?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:150px;
height:100px;
padding:10px;
margin-top:10px;
list-style:none;
}
.padding-box{
background-clip:padding-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
<li class="padding-box"></li>
</ul>
</body>
</html>? ??? ???? ? ? ??? ?? ?? ???? ?? ???? ?? ? ??? ??? ?? ???? ?? ? ????.
3.content-box:
??? ??, ? ??? ???? ??? ??? ?? ???? ??? ? ??? ???? ?????. ?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:150px;
height:100px;
padding:10px;
margin-top:10px;
list-style:none;
}
.content-box{
background-clip:content-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
<li class="content-box"></li>
</ul>
</body>
</html> ? ??? ??? ?? ??? ??? ?? ???? ?? ???? ??? ? ??? ? ? ????.
IV.tex:
?? ???(?: ???)? ???? ????? ??? ??? ?????. ?, ?? ???? ?? ?? ?????. ?? ???(?: ???? ??? ???)
?? ??? ??? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:250px;
height:200px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
font-size:60px;
font-weight:900
}
.border-box{
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
/*color:transparent;*/
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">php中文網(wǎng)</li>
</ul>
</body>
</html>? ??? ???? ? ? ??? ?? ???? ??? ???? ?????, text-fill- ???? ?? ?? ?? ?? ?? ???? ???? ???. ??? ??? ?? ???? ?????.
