css3 border-radius画圆

1/4圆 ：

        .bottom-right{
            width: 40px;
            height: 40px;
            background: yellow;
            border-radius: 40px 0 0 0  ;
        }

设置元素的border-radius 属性 第一个值和元素的宽高相同 后三个 为0，即可得到以顺时针为方向的第一个1/4圆 

border-radius: 40px 0 0 0  ;

以此类推 设置 第二个值与元素的宽高相同 可得到顺时针方向第二个1/4圆  

border-radius: 0 40px 0 0  ;

     

border-radius: 0 0 40px 0  ;

border-radius: 0 0 0 40px  ;

半圆：

 上半圆

 .top {
      width: 100px;/*宽度为高度的2倍*/
      height: 50px;
      border-radius: 50px 50px 0 0;/*圆角半径为高度的值*/
    }

右半圆

    .right {
      height: 100px;/*高度为宽度的2倍*/
      width: 50px;
      border-radius: 0 50px 50px 0;/*圆角半径为宽度的值*/
    }

底半圆
    .bottom {
      width: 100px;/*宽度为高度的2倍*/
      height: 50px;
      border-radius: 0 0 50px 50px;/*圆角半径为高度的值*/
    }

左半圆
    .left {
      width: 50px;
      height: 100px;/*高度为宽度的2倍*/
      border-radius: 50px 0 0 50px;/*圆角半径为宽度的值*/
    }