您的位置:首页 > Web前端 > css > 正文

CSS3 border-radius实现边框圆角

更多 时间:2014-1-7 类别:Web前端 浏览量:70063

CSS3 border-radius实现边框圆角

CSS3 border-radius实现边框圆角

border-radius实现边框圆角

 

一、基本语法:

  border-radius : none | <length>{1,4} [/ <length>{1,4} ]?

 

二、取值范围:

  <length>: 由浮点数字和单位标识符组成的长度值。不可为负值。

 

三、简单说明:

1、border-radius 是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:

  (1)、只有一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

  (2)、有两个值,那么 top-left 等于 bottom-right,并且取第一个值;top-right 等于 bottom-left,并且取第二个值

  (3)、有三个值,其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。

  (4)、有四个值,其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

 

2、其实 border-radius 和 border 属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴在X轴:

 

  • border-top-left-radius: <length> <length> //左上角
  • border-top-right-radius: <length> <length> //右上角
  • border-bottom-right-radius:<length> <length> //右下角
  • border-bottom-left-radius:<length> <length> //左下角
  •  
  •  
  • 3、这里说一下,各角拆分出来取值方式:<length> <length> 中第一个值是圆角水平半径,第二个值是垂直半径,如果第二个值省略,那么其等于第一个值,这时这个角就是一个四分之一的圆角,如果任意一个值为0,那么这个角就不是圆角。
  •  

    四、border-radius各浏览器的支持

     

    border-radius 只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式,对于老版的浏览器,border-radius 需要根据不同的浏览器内核添加不同的前缀,比说 Mozilla 内核需要加上“-moz”,而 Webkit 内核需要加上“-webkit”等,那么我为了能兼容各大内核的老版浏览器

     

    1、Mozilla(Firefox, Flock等浏览器)

     

  • -moz-border-radius-topleft: //左上角
  • -moz-border-radius-topright: //右上角
  • -moz-border-radius-bottomright: //右下角
  • -moz-border-radius-bottomleft: //左下角
  •  
  •  
  • 2、WebKit (Safari, Chrome等浏览器)
  •  
  • -webkit-border-top-left-radius: //左上角
  •  
  • -webkit-border-top-right-radius: //右上角
  • -webkit-border-bottom-right-radius: //右下角
  • -webkit-border-bottom-left-radius: // 左下角
  •  

    3、Opera浏览器:

     

  • border-top-left-radius: //左上角
  • border-top-right-radius: //右上角
  • border-bottom-right-radius: //右下角
  • border-bottom-left-radius: //左下角
  •  
  •  
  • 4、Trident (IE)

    IE9 以下版本不支持 border-radius,而且 IE9 没有私有格式,都是用 border-radius,其写法和 Opera 是一样的

  •  

    5、浏览器支持的备注

    (1)、为了不管是新版还是老版的各种内核浏览器都能支持 border-radius 属性,那么我们在具体应用中时需要把我们的 border-radius 格式改成:

     

  • -moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
  • -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
  • border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
  • (2)、border-radius 一定要放置在 -moz-border-radius 和 -webkit-border-radius 后面,(特别声明:本文中所讲实例都只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或者在 border-radius 前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)

     

     

    五、border-radius圆角实例

     

    1、border-radius只有一个取值时,四个角具有相同的圆角设置,其效果是一致的:

     

  • .demo {
  • border-radius: 10px;
  • }
  • 效果:

     

    2、border-radius设置两个值,此时top-left等于bottom-right并且他们取第一个值;top-right等于bottom-left并且他们取第二个值,也就是说元素 左上角和右下角相同,右上角和左下角相同

     

  • .demo {
  • border-radius: 10px 20px;
  • }
  • 等价于:

  • .demo {
  • border-top-left-radius: 10px;
  • border-bottom-right-radius: 10px;
  • border-top-right-radius: 20px;
  • border-bottom-left-radius: 20px;
  • }
  • 效果:

     

     

    3、border-radius设置三个值,此时top-left取第一个值,top-right等于bottom-left并且他们取第二个值,bottom-right取第三个值:

     

  • .demo {
  • border-radius: 10px 20px 30px;
  • }
  •  
  • 等价于:
  •  
  • .demo {
  • border-top-left-radius: 10px;
  • border-top-right-radius: 20px;
  • border-bottom-left-radius: 20px;
  • border-bottom-right-radius: 30px;
  • }
  •  
  • 效果:
  •  
  •  
  •  
  •  
  • 4、border-radius设置四个值,此时top-left取第一个值,top-right取第二个值,bottom-right取第三个值.bottom-left取第四个值:
  •  
  • .demo {
  • border-radius:10px 20px 30px 40px;
  • }
  •  
  • 等价于:
  •  
  • .demo {
  • border-top-left-radius: 10px;
  • border-top-right-radius: 20px;
  • border-bottom-right-radius: 30px;
  • border-bottom-left-radius: 40px;
  • }
  •  
  • 效果:

     

    实例说明

    从上面四个实例中我们可以看出border-radius和border取值非常相似,我们border遵循TRBL原则(从上边右边下边左边分别对应1、2,3,4四个值),只不过border-radius换成了左上角(top-left)对就值1,右上角(top-right)对应值2,右下角(bottom-right)对应值3,左下角(bottom-left)对应值4.

     

  • 上面四个实例都是水平和垂直半径相等情况下border-radius的应用,水平和垂直半径值不一样的实例也类似