css實現橢圓

先實現個簡單點的，用css實現一個圓，ok，直接上代碼：

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

實現橢圓的方法

1.利用css3變形

.circle{
    width: 100px;
    height:100px;
    background: red;
    border-radius: 50%;
    transform: scale(1,0.5);
}

效果以下

2.直接改變高度

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

效果以下

3.利用border-radius屬性

.circle{
    width: 100px;
    height:100px;
    background: red;
    border-top-left-radius:100px 50px;
    border-top-right-radius:100px 50px;
    border-bottom-left-radius:100px 50px;
    border-bottom-right-radius:100px 50px;
}

效果以下

可是這樣實現的效果還不是橢圓，還要再把高度設置爲寬度的一半，因此仍是直接用第二種方法比較簡便

參考

• border-radius[MDN]
• CSS3 border-radius知多少
• css實現橢圓、半橢圓