矩形
width=height
.aa{
width: 100px;
height: 100px;
background: red;
}
<div class="aa"></div>
长方形
width!=height
.aa{
width: 100px;
height: 150px;
background: red;
}
<div class="aa"></div>
圆
.aa{
width: 100px;
height: 150px;
background: red;
border-radius:50%;
}
<div class="aa"></div>
圆环
.aa{
width: 100px;
height: 100px;
border-radius: 50%;
border:20px solid transparent;
border-left-color:red;
border-top-color: #f60;
border-bottom-color: blue;
border-right-color: green;
}
<div class="aa"></div>
半圆
.aa{
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
}
<div class="aa"></div>
1/4圆
.aa{
width: 100px;
height: 100px;
background: red;
border-radius: 100px 0 0;
}
<div class="aa"></div>
椭圆
.aa{
width: 100px;
height: 200px;
background: red;
border-radius: 100px/200px;
}
<div class="aa"></div>
椭圆环
.aa{
width: 100px;
height: 200px;
background: red;
border-radius: 100px/200px;
position: relative;
}
.aa .bb{
width: 100px;
height: 200px;
background: #fff;
border-radius: 100px/200px;
position: absolute;
transform: scale(0.5,0.5);
}
<div class="aa">
<div class="bb"></div>
</div>
总结：诸如环/对称可以看出利用复制+css3的rotate()/translate（）/sacle（）可以起到非常好的效果
