CSS3的圆角border-radius属性

时间:2022-11-14 09:26:03

一,语法解释

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

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

其中每一个值可以为 数值或百分比的形式。

如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的,与margin,padding等的缩写类似。

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一样,分别写四个角,如下: 

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”等,但是IE和Opera没有私有格式,因此为了最大程度的兼容浏览器,我们需要设置如下: -webkit-border-radius: 10px 20px 30px; -moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px; 

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

三、应用

1. 圆形。注意:同时设置4个角落的形状的半径的时候不能超过50%;

CSS3的圆角border-radius属性

2.设置椭圆时常用写法。

border-radius: 100px 10px / 100px 10px;

    "/" 之前代表:  top   top   bottom bottom

    "/" 之后代表:  left  right   right      left

#oval { 
width: 200px; 
height: 100px; 
background: red; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px; 

 

3、对于border-radius还有一个内半径和外半径的区别,它主要是元素 边框值较大时,效果就很明显,当我们border-radius半径值小于或等于border的厚度时,我们边框内部就不具有圆角效果,例如下面的实例

.border-big { border: 15px solid green; border-radius: 15px; } 

效果:

CSS3的圆角border-radius属性

我们接着上面这个例子,把 border-radius半径值改成比边框值大一点:

.border-small { border: 15px solid green; border-radius: 25px; } 

效果:

CSS3的圆角border-radius属性

border-radius的内径值是等于外径值减去边框厚度值,当他们的值为负时,border-radius的值不能为负值,内径默认为0。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时,我们内外曲线的圆心才会在同一位置。

4、border-radius能应用在各种元素中,但在img和table应用时会有点差别的,首先先来看图片上应用border-radius时的情况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常,而在其他浏览器都不能对图片进行剪切,我们先来看一个实例:

img { border: 5px solid green; border-radius: 15px; } 

我们来看其在各浏览器下的效果:

CSS3的圆角border-radius属性

左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果,我们可以看得出,图片根本就没有圆角效果,右图是在Firefox4.0下的效果,低于这个版本的和左图一样效果,如果需要达成一致效果,大家就必须放弃border-radius而采用CSS2制作圆角的老办法。另外table的样式属性border-collapse是collapse时,border-radius不能正常显示,只有border-collapse: separate;时才能正常显示。

5、红心

#heart { 
position: relative; 
width: 100px; 
height: 90px; 

#heart:before, 
#heart:after { 
position: absolute; 
content: ""; 
left: 50px; 
top: 0; 
width: 50px; 
height: 80px; 
background: red; 
-moz-border-radius: 50px 50px 0 0; 
border-radius: 50px 50px 0 0; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 
-webkit-transform-origin: 0 100%; 
-moz-transform-origin: 0 100%; 
-ms-transform-origin: 0 100%; 
-o-transform-origin: 0 100%; 
transform-origin: 0 100%; 

#heart:after { 
left: 0; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
-webkit-transform-origin: 100% 100%; 
-moz-transform-origin: 100% 100%; 
-ms-transform-origin: 100% 100%; 
-o-transform-origin: 100% 100%; 
transform-origin :100% 100%; 

6、无穷大符号

#infinity { 
position: relative; 
width: 212px; 
height: 100px; 

#infinity:before, 
#infinity:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
width: 60px; 
height: 60px; 
border: 20px solid red; 
-moz-border-radius: 50px 50px 0 50px; 
border-radius: 50px 50px 0 50px; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 

#infinity:after { 
left: auto; 
right: 0; 
-moz-border-radius: 50px 50px 50px 0; 
border-radius: 50px 50px 50px 0; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg);