圓角效果

圓角效果 ：border-radius

使用方法：

border-radius:10px; /* 所有角都使用半徑爲10px的圓角 */

border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */ 

border-radius的值不僅能用px單位，你還可以用百分比或者em，但兼容性目前還不太好。

實心上半圓：

方法：把高度(height)設爲寬度（width）的一半，並且只設置左上角和右上角的半徑與元素的高度一致（大於也是可以的）。

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半徑至少設置爲height的值*/
    }
    

實心圓：
方法：把寬度（width）與高度(height)值設置爲一致（也就是正方形），並且四個圓角值都設置爲它們值的一半。如下代碼：

div{
    height:100px;/*與width設置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四個圓角值都設置爲寬度或高度值的一半*/
    }