CSS3 邊框
用CSS3，您可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計(jì)程序（如Photoshop等作圖軟件），極大地幫助您節(jié)省了很多時(shí)間。
而在本節(jié)中，您將了解以下的邊框?qū)傩杂校?/p>
-
border-radius
-
box-shadow
-
border-image（需要注意的是：該屬性不支持ie瀏覽器）
Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。
Firefox、Chrome 以及 Safari 支持所有新的邊框?qū)傩浴?/p>
注釋：對(duì)于 border-image，Safari 5 以及更老的版本需要前綴 -webkit-。
Opera 支持 border-radius 和 box-shadow 屬性，但是對(duì)于 border-image 需要前綴 -o-。
CSS3 圓角
在CSS2中添加圓角是需要一些技巧的，尤其對(duì)于新手來說更加難了，所有我們不得不在每個(gè)角落使用不同的圖像。
但是如果您在CSS3中，就能夠很容易創(chuàng)建圓角。在CSS3中border-radius屬性就是被用于創(chuàng)建圓角的：
CSS3盒陰影
CSS3中的box-shadow屬性被用來添加陰影:
CSS3邊界圖片
有了CSS3的border-image屬性，你可以使用圖像創(chuàng)建一個(gè)邊框：
在div中使用圖片創(chuàng)建邊框:
實(shí)例
在div中使用圖片創(chuàng)建邊框
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
嘗試一下 ?
新邊框?qū)傩?/h2>
| 屬性 | 說明 | CSS |
|---|---|---|
| border-image | 設(shè)置所有邊框圖像的速記屬性。 | 3 |
| border-radius | 一個(gè)用于設(shè)置所有四個(gè)邊框- *-半徑屬性的速記屬性 | 3 |
| box-shadow | 附加一個(gè)或多個(gè)下拉框的陰影 | 3 |
以上就是本節(jié)的全部內(nèi)容，關(guān)于CSS3邊框，您是否學(xué)會(huì)了呢？如果還是有些疑惑，建議您多看幾遍，或者對(duì)著上文中的示例多做幾遍！
更多建議：