好程序員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 元素添加圓角：

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 屬性，您可以使用圖片來創建邊框：

用于創建上面的邊框的原始圖片：

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

<font color="#000000" size="3">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 */

}</font>

新的邊框屬性

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

轉載于:https://blog.51cto.com/14249543/2395093

總結

以上是生活随笔為你收集整理的好程序员web前端分享CSS3边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。