border-radius

圆角的方块：

1 border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

实心上半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（也可以大于高度）。

1 #box{
2     width:80px;
3     height:40px;/*宽度的一半*/
4     background:skyblue;
5     border-radius:40px 40px 0 0;/*4个值分别代表上、右、下、左*/
6 }

实心圆：

方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。

1 #box{
2     width:80px;
3     height:80px;
4     background:skyblue;
5     border-radius:40px;
6 }

实心左半圆形：

方法：元素宽度为高度的一半，把左上角和左下角设为高度的一半。

1 #box{
2     width:40px;
3     height:80px;
4     background:skyblue;
5     border-radius:40px 0 0 40px;
6 }