html css做椭圆,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;

}

效果如下

但是这样实现的效果还不是椭圆，还要再把高度设置为宽度的一半，所以还是直接用第二种方法比较简便

参考