border語法

border-radius支援是四個角，總共八個值（水平+垂直）的設定：

border-radius:1px 2px 3px 4px / 5px 6px 7px 8px;

表示

border-top-left-radius:1px 5px;
border-top-right-radius:2px 6px;
border-bottom-right-radius:3px 7px;
border-bottom-left-radius:4px 8px;

表示從左上角開始，順時針旋轉依次設定每個角的水平值和垂直值

有以下幾種簡寫方式

border-radius:50%;
/*等同於*/
border-radius:50% 50% 50% 50%/50% 50% 50% 50%;
 

border-radius:50% 20%;
/*等同於*/
border-radius:50% 20% 50% 20%;

border-radius:50% 20% 40%;
/*等同於*/
border-radius:50% 20% 40% 20%;

舉幾個例子

1、製作一個橢圓

.circle{
    width:150px;
    height:100px;
    border-radius:50%;
    border:1px solid red;
}

2、半橢圓

.circle{
    width:150px;
    height:100px;
    border-radius:50% 50% 0 0/100% 100% 0 0;
    border:1px solid red;
}
 

.circle{
    width:150px;
    height:100px;
    border-radius:100% 100% 0 0/50% 50% 0 0;
    border:1px solid red;
}

3、一片樹葉

.circle{
    width:150px;
    height:100px;
    border-radius:100% 0;
    border:1px solid red;
}

4、普通的圖形

.circle{
    width:150px;
    height:100px;
    border-radius:10px 20px 30px 40px/20px 30px 40px 50px;
    border:1px solid red;
}