CSS3圆角知识的详细讲解

 

一、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 －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、代码很简单，希望能帮到你。

审核编辑：符乾江