css3奇妙的border-raidus参数，百分比和数值设置效果不同

 

项目经验，设置数值与百分比得到的效果是不同的：

一： 元素宽高相同，则设置数值与百分比的效果是一致的；

二：元素宽高不等，如下图，则设置数值与百分比的效果不同：

 

   1）设置为数值：得到胶囊状效果；

border-radius:10px;

//其实就是一个以10px为半径的圆顶格放置在四个边角后所呈现的弧度;

　　

2）设置为百分比：得到椭圆状效果；

border-radius:50%;

//其实就是一个以宽50%及高50%为半径的椭圆顶格放置在四个边角后所呈现的弧度;

//border-radius: 50% == border-radius: 50%/50%
前面一个值是相对宽度的百分比，后面一个值是相对高度的百分比

 

总结：border-radius的原理就是拿一个椭圆/圆去切割一个角，这样就更容易理解了。