好程序員web前端分享CSS3 邊框

好程序員web前端分享CSS3 邊框，經過 CSS3，您可以建立圓角邊框，向矩形添加陰影，使用圖片來繪製邊框 - 而且不需使用設計軟件，好比 PhotoShop。
在本章中，您將學到如下邊框屬性：
border-radius
box-shadow
border-image

瀏覽器支持

Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。
Firefox、Chrome 以及 Safari 支持全部新的邊框屬性。
註釋：對於 border-image，Safari 5 以及更老的版本須要前綴 -webkit-。
Opera 支持 border-radius 和 box-shadow 屬性，可是對於 border-image 須要前綴 -o-。

CSS3 圓角邊框
在 CSS2 中添加圓角矩形須要技巧。咱們必須爲每一個圓角使用不一樣的圖片。
在 CSS3 中，建立圓角是很是容易的。
在 CSS3 中，border-radius 屬性用於建立圓角：

實例
向 div 元素添加圓角：

1. div
2. {
3. border:2px solid;
4. border-radius:25px;
5. -moz-border-radius:25px; /* Old Firefox */
6. }

CSS3 邊框陰影
在 CSS3 中，box-shadow 用於向方框添加陰影： 

實例
向 div 元素添加方框陰影：

1. div
2. {
3. box-shadow: 10px 10px 5px #888888;
4. }

CSS3 邊框圖片
經過 CSS3 的 border-image 屬性，您能夠使用圖片來建立邊框：

用於建立上面的邊框的原始圖片：

實例
使用圖片建立圍繞 div 元素的邊框：

1. <font color="#000000" size="3">div
2. {
3. border-image:url(border.png) 30 30 round;
4. -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
5. -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
6. -o-border-image:url(border.png) 30 30 round; /* Opera */
7. }</font>

新的邊框屬性

屬性	描述	CSS
border-image	設置全部 border-image-* 屬性的簡寫屬性	3
border-radius	設置全部四個 border-*-radius 屬性的簡寫屬性	3
box-shadow	向方框添加一個或多個陰影	3