CSS3属性之border-radius

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3属性之border-radius相关的知识,希望对你有一定的参考价值。

一、语法:

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

二、取值:

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

三、说明:

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

1、border-radius: [ <length>{1,4} ]; //这里只有一个值,那么top-left、top-right、bottom-right、bottom-left四个值相等

2、border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ; //这里设置两个值,那么top-left等于bottom-right,并且取第一个值;top-right等于bottom-left,并且取第二个值

3、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];//如果有三个值,其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

4、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];//如果有四个值,其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

前面,我们主要看了border-radius的缩写格式,其实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>   //左下角

这里说一下,各角拆分出来取值方式:<length> <length>中第一个值是圆角水平半径,第二个值是垂直半径,如果第二个值省略,那么其等于第一个值,这时这个角就是一个四分之一的圆角,如果任意一个值为0,那么这个角就不是圆角。

 

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

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


  -moz-border-radius-topleft: //左上角
  -moz-border-radius-topright: //右上角
  -moz-border-radius-bottomright: //右下角
  -moz-border-radius-bottomleft: //左下角
  
   等价于:
  -moz-border-radius: //简写

2、WebKit (Safari, Chrome等浏览器)


  -webkit-border-top-left-radius:  //左上角
  -webkit-border-top-right-radius:  //右上角
  -webkit-border-bottom-right-radius:  //右下角
  -webkit-border-bottom-left-radius:  // 左下角
   等价于:
  -webkit-border-radius:  //简写

3、Opera浏览器:


  border-top-left-radius: //左上角
  border-top-right-radius: //右上角
  border-bottom-right-radius: //右下角
  border-bottom-left-radius: //左下角
 
  等价于:
 
  border-radius: //简写

4、Trident (IE)

 

IE<9不支持border-radius;IE9下没有私有格式,都是用border-radius,其写法和Opera是一样的,这里就不在重复。

为了不管是新版还是老版的各种内核浏览器都能支持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} ]?

其拆分开来的格式相应需要加上-moz和-webkit,上面的代码其实就等价于下面的代码:


 -moz-border-radius-topleft:  <length> <length> //左上角
-moz-border-radius-topright: <length> <length> //右上角
-moz-border-radius-bottomright: <length> <length> //右下角
-moz-border-radius-bottomleft: <length> <length> //左下角
-webkit-border-top-left-radius: <length> <length> //左上角
-webkit-border-top-right-radius: <length> <length> //右上角
-webkit-border-bottom-right-radius: <length> <length> //右下角
-webkit-border-bottom-left-radius: <length> <length> // 左下角
border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius: <length> <length> //右下角
border-bottom-left-radius: <length> <length> //左下角

另外需要特别注意的是,border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面,(特别声明:本文中所讲实例都只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或者在border-radius前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)

 

我们初步来看一个实例:

html代码:


 <div class="demo" ></div>

为了更好的看出效果,我们给这个demo添加一点样式:


.demo {
  width: 150px;
  height: 80px;
  border: 2px solid #f36;
  background: #ccc;
}


.demo {
  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}

这种写法我们前面有提到过,“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循TRBL的顺序原则。为了能让大家更清楚理解,我们把上面代码换成如下:


.demo {
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px 15px;
}

以上是关于CSS3属性之border-radius的主要内容,如果未能解决你的问题,请参考以下文章

css3属性——border-radius用法

css3系列之详解border-radius

CSS3就是这么神奇,先从border-radius开始

零基础跟我学前端之css3基础

零基础跟我学前端之css3基础

CSS3圆角属性详解