CSS3 邊框
用CSS3，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計(jì)程序，如Photoshop。
在本章中，您將了解以下的邊框?qū)傩裕?/p>
border-radius
box-shadow
border-image
CSS3 圓角
在CSS2中添加圓角棘手。我們不得不在每個(gè)角落使用不同的圖像。
在CSS3中，很容易創(chuàng)建圓角。
在CSS3中border-radius屬性被用于創(chuàng)建圓角：
這是圓角邊框！
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 屬性允許您為元素添加圓角邊框！ </div>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS3盒陰影
CSS3中的box-shadow屬性被用來添加陰影:
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS3邊界圖片
有了CSS3的border-image屬性，你可以使用圖像創(chuàng)建一個(gè)邊框：
border-image屬性允許你指定一個(gè)圖片作為邊框！
用于創(chuàng)建上文邊框的原始圖像：
在div中使用圖片創(chuàng)建邊框:
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(../style/images/border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(../style/images/border.png) 30 30 round; /* Opera */
border-image:url(../style/images/border.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(../style/images/border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(../style/images/border.png) 30 30 stretch; /* Opera */
border-image:url(../style/images/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><b>注意: </b> Internet Explorer 不支持 border-image 屬性。</p>
<p> border-image 屬性用于設(shè)置圖片的邊框。</p>
<div id="round">這里，圖像平鋪（重復(fù)）來填充該區(qū)域。</div>
<br>
<div id="stretch">這里，圖像被拉伸以填充該區(qū)域。</div>
<p>這是我們使用的圖片素材：</p>
<img src="/images/border.png" />
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
新邊框?qū)傩?/h2>
| 屬性 | 說明 | CSS |
|---|---|---|
| border-image | 設(shè)置所有邊框圖像的速記屬性。 | 3 |
| border-radius | 一個(gè)用于設(shè)置所有四個(gè)邊框- *-半徑屬性的速記屬性 | 3 |
| box-shadow | 附加一個(gè)或多個(gè)下拉框的陰影 | 3 |