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实现椭圆、半椭圆