一、瀏覽器支持

表中的數字指定完全支持該屬性的第一個瀏覽器版本。

數字后面的 －webkit－ 或者 －moz－ 使用時需要指定前綴。

屬性ChromeFirefoxSafariOperaIEborder－radius5．0 4．0 －webkit－9．04．0 3．0 －moz－5．0 3．1 －webkit－10．5

二、border－radius 屬性

1． 創建具有背景圖的圓角

CSS3中，可以使用border－radius屬性，為元素指定圓角顯示。

代碼如下：

＜！DOCTYPE html＞ ＜html＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項目＜／title＞
＜head＞ ＜style＞ ＃rcorners1 ｛ border－radius： 25px； background： ＃f00； padding： 20px； width： 200px； height： 150px； ｝
＃rcorners2 ｛ border－radius： 25px； border： 2px solid ＃73AD21； padding： 20px； width： 200px； height： 150px； ｝
＃rcorners3 ｛ border－radius： 25px； background： url（img／fy＿indexBg．jpg）； background－position： left top； background－repeat： repeat； padding： 20px； width： 200px； height： 150px； ｝＜／style＞ ＜／head＞
＜body＞
＜p＞The border－radius property allows you to add rounded corners to elements．＜／p＞ ＜p＞Rounded corners for an element with a specified background color：＜／p＞ ＜！－－1．具有指定背景色的圓角元素－－＞ ＜p id＝＂rcorners1＂＞Rounded corners！＜／p＞ ＜p＞Rounded corners for an element with a border：＜／p＞ ＜！－－2．帶邊框的圓角元素：－－＞ ＜p id＝＂rcorners2＂＞Rounded corners！＜／p＞ ＜！－－3．帶背景圖的圓角元素－－＞ ＜p＞Rounded corners for an element with a background image：＜／p＞ ＜p id＝＂rcorners3＂＞Rounded corners！＜／p＞
＜／body＞
＜／html＞

提示：

border－radius屬性實際是border－top－left－radius， border－top－right－radius， border－bottom－right－radius 和 border－bottom－left－radius 屬性的簡寫。

2． 為每個角指定弧度

如果只為border－radius屬性指定一個值，則此半徑將應用于所有4個角。

另外可以根據自己開發的需求，分別指定每個角。以下是規則：

四個值： 第一個值適用于左上角，第二個值適用于右上方，第三值應用于右下角，第四值適用于左下角。

三個值： 第一個值適用于左上，二值適用于右上和左下，右下第三值適用于。

兩個值： 第一個值適用于左上和右下角，和二值適用于右上和左下角。

一個值： 所有的四個角都是圓的。

實例1：

1．四個值 － border－radius： 15px 50px 30px 5px

＃rcorners4 ｛ border－radius： 15px 50px 30px 5px； background： ＃f00； padding： 20px； width： 200px； height： 150px；｝

2．三個值 － border－radius： 15px 50px 30px

＃rcorners5 ｛ border－radius： 15px 50px 30px； background： ＃f00； padding： 20px； width： 200px； height： 150px；｝

3．兩個值 － border－radius： 15px 50px

＃rcorners6 ｛ border－radius： 15px 50px； background： ＃f00； padding： 20px； width： 200px； height： 150px；｝

完整代碼 ：

＜！DOCTYPE html＞＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項目＜／title＞ ＜style＞ ＃rcorners4 ｛ border－radius： 15px 50px 30px 5px； background： ＃f00； padding： 20px； width： 200px； height： 150px； ｝
＃rcorners5 ｛ border－radius： 15px 50px 30px； background： ＃f00； padding： 20px； width： 200px； height： 150px； ｝
＃rcorners6 ｛ border－radius： 15px 50px； background： ＃f00； padding： 20px； width： 200px； height： 150px； ｝＜／style＞＜／head＞＜body＞
＜p＞四個值 － border－radius： 15px 50px 30px 5px：＜／p＞＜p id＝＂rcorners4＂＞＜／p＞
＜p＞三個值 － border－radius： 15px 50px 30px：＜／p＞＜p id＝＂rcorners5＂＞＜／p＞
＜p＞兩個值 － border－radius： 15px 50px：＜／p＞＜p id＝＂rcorners6＂＞＜／p＞
＜／body＞＜／html＞ 實例2：

創建橢圓形的圓角

創建橢圓形的圓角

橢圓邊框 ：border－radius： 50px／15px

＃rcorners7 ｛ border－radius： 50px／15px； background： ＃73AD21； padding： 20px； width： 200px； height： 150px；｝

橢圓邊框 ： border－radius： 15px／50px

＃rcorners8 ｛ border－radius： 15px／50px； background： ＃73AD21； padding： 20px； width： 200px； height： 150px； ｝

橢圓邊框 ： border－radius： 50％

＃rcorners9 ｛ border－radius： 50％； background： ＃73AD21； padding： 20px； width： 200px； height： 150px； ｝

完整代碼：

＜！DOCTYPE html＞＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項目＜／title＞ ＜style＞ ＃rcorners7 ｛ border－radius： 50px／15px； background： ＃73AD21； padding： 20px； width： 200px； height： 150px； ｝
＃rcorners8 ｛ border－radius： 15px／50px； background： ＃73AD21； padding： 20px； width： 200px； height： 150px； ｝
＃rcorners9 ｛ border－radius： 50％； background： ＃73AD21； padding： 20px； width： 200px； height： 150px； ｝＜／style＞＜／head＞＜body＞
＜p＞橢圓邊框 － border－radius： 50px／15px：＜／p＞ ＜p id＝＂rcorners7＂＞＜／p＞
＜p＞橢圓邊框 － border－radius： 15px／50px：＜／p＞ ＜p id＝＂rcorners8＂＞＜／p＞
＜p＞橢圓邊框 － border－radius： 50％：＜／p＞ ＜p id＝＂rcorners9＂＞＜／p＞－－＞
＜／body＞＜／html＞

三、總結

1、本文主要講解了CSS3圓角，通過一些屬性的演示，豐富的案例，幫助大家理解CSS知識。希望大家可以耐心的去學習，同時希望碰到問題主動搜索，嘗試一下，總會有解決方法。

2、代碼很簡單，希望能幫到你。