border-radius简介

border-radius 属性可以轻松的设置圆角边框，甚至实现绘制圆、半圆和椭圆。
border-radius 属性实际上是给div等区块设置圆角，并设置圆角的半径等。

一般来说，div设计的区域是个矩形：

.rectangle{
 border:2px solid #a1a1a1;
 padding 10px 40px; 
 background:#dddddd;
 width:300px;
 height:40px
 }

这里的div就是尖角：

<div class="rectangle">div</div>

但加入了border-radius属性后：就可以出现圆角：

.radius
{
 border:2px solid #a1a1a1;
 padding:10px 60px; 
 background:#dddddd;
 width:300px;
<!--这里添加border-radius属性，设置半径 25px-->
 border-radius:50%;
}

<div class="radius">div圆角</div>

当div宽高一致且你的圆角半径为div的高度、宽度一半（或设置为50%）时，就可以出现圆。

.radius
{
 border:2px solid #a1a1a1;
 background:#dddddd;
 width:50px;
 border-radius:25px;
 <!--或者为：border-radius:50%-->
 height:50px;
}

当宽高不一致时，会出现椭圆，但注意这里用px等将半径定死时会有异常：

div
{
 border:2px solid #a1a1a1; 
 background:#dddddd;
 width:50px;
 border-radius:25px;
 height:40px;
}

这里并不是一个严格的椭圆：

所以你要把半径设计为50%:
此时为椭圆：