# CSS3 邊框 ## CSS3 邊框 通過 CSS3，您能夠創建圓角邊框，向矩形添加陰影，使用圖片來繪制邊框 - 并且不需使用設計軟件，比如 PhotoShop。 在本章中，您將學到以下邊框屬性： * border-radius * box-shadow * border-image ## 瀏覽器支持 | 屬性 | 瀏覽器支持 | | --- | --- | | 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 屬性，您可以使用圖片來創建邊框： border-image 屬性允許您規定用于邊框的圖片！ 用于創建上面的邊框的原始圖片：  ### 實例 使用圖片創建圍繞 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 */ } ``` ## 新的邊框屬性 | 屬性 | 描述 | CSS | | --- | --- | --- | | [border-image](/cssref/pr_border-image.asp "CSS3 border-image 屬性") | 設置所有 border-image-* 屬性的簡寫屬性。 | 3 | | [border-radius](/cssref/pr_border-radius.asp "CSS3 border-radius 屬性") | 設置所有四個 border-*-radius 屬性的簡寫屬性。 | 3 | | [box-shadow](/cssref/pr_box-shadow.asp "CSS3 box-shadow 屬性") | 向方框添加一個或多個陰影。 | 3 |