HTML边框圆角椭圆原理,CSS3教程：border-radius你以为就是个圆角边框吗？

很多人拿border-radius就是做点圆角效果，或者弄一个圆形的头像(说的就是以前的自己^_^)，但，这些都是没有真正发掘border-radius的价值的！

先看看一些别人的效果↓

看了后突然发现自己以前对border-radius的了解好无知哦@_@

知耻而后勇！那我们就开始学起来！

一、border-radius的基础语法

border-radius: 1-4 length|% / 1-4 length|%;

以前半径值是length，也就是固定像素值，现在在新的标准里面，可以设置百分比的值了。

比如：border-radius:50%;

或者：border-radius:2em;

二、border-radius的百分比值

如果以前我们要做一个正圆，元素具有border和padding，则圆角半径是需要考虑这些元素占位的值的。.box{

width:100px;

height:100px;

border:20px solid #F60;

}

.br1{

border-radius:70px;}

.br2{

border-radius:50px;}

但是如果我们使用百分比的值则不用再计算了。.br3{

border-radius:50%;}

感觉棒棒的！

三、border-radius的水平、垂直半径

1、四方都是1/4圆的圆角半径，说明水平和垂直的半径是一样的。.br4{

border-radius:10px 20px 30px 40px;}