CSS3的圆角border-radius属性

一，语法解释

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%;

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;

}

效果：

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

.border-small {

   border: 15px solid green;

   border-radius: 25px;

}

效果：

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;

}

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

左图是在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);
}

巴特西

CSS3的圆角border-radius属性

一，语法解释

二、兼容性问题

三、应用

最新文章

热门文章