CSS3 邊框
此節(jié)有 248 人學(xué)習(xí)過 參與評論
CSS3 邊框
通過 CSS3，您能夠創(chuàng)建圓角邊框，向矩形添加陰影，使用圖片來繪制邊框 - 并且不需使用設(shè)計軟件，比如 PhotoShop。
在本章中，您將學(xué)到以下邊框?qū)傩裕?/p>
- border-radius
- box-shadow
- border-image
瀏覽器支持
| 屬性 | 瀏覽器支持 | ||||
|---|---|---|---|---|---|
| border-radius | |||||
| box-shadow | |||||
| border-image | |||||
Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。
Firefox、Chrome 以及 Safari 支持所有新的邊框?qū)傩浴?/p>
注釋：對于 border-image，Safari 5 以及更老的版本需要前綴 -webkit-。
Opera 支持 border-radius 和 box-shadow 屬性，但是對于 border-image 需要前綴 -o-。
CSS3 圓角邊框
在 CSS2 中添加圓角矩形需要技巧。我們必須為每個圓角使用不同的圖片。
在 CSS3 中，創(chuàng)建圓角是非常容易的。
在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角：
這個矩形有圓角哦！
實例
向 div 元素添加圓角：
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
CSS3 邊框陰影
在 CSS3 中，box-shadow 用于向方框添加陰影：
實例
向 div 元素添加方框陰影：
div
{
box-shadow: 10px 10px 5px #888888;
}
CSS3 邊框圖片
通過 CSS3 的 border-image 屬性，您可以使用圖片來創(chuàng)建邊框：
border-image 屬性允許您規(guī)定用于邊框的圖片！
用于創(chuàng)建上面的邊框的原始圖片：
實例
使用圖片創(chuàng)建圍繞 div 元素的邊框：
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
新的邊框?qū)傩?/h2>
| 屬性 | 描述 | CSS |
|---|---|---|
| border-image | 設(shè)置所有 border-image-* 屬性的簡寫屬性。 | 3 |
| border-radius | 設(shè)置所有四個 border-*-radius 屬性的簡寫屬性。 | 3 |
| box-shadow | 向方框添加一個或多個陰影。 | 3 |
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點擊進(jìn)入論壇
您可能感興趣的文章:
------分隔線----------------------------
CSS3教程目錄
