1、圆形
思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：
html:
<div class="size example1"></div>
css:
.size{width:200px; heigh: 200px;background:#8BC34A;}
.example1{border-radius:100px;}
2、自适应椭圆
html:
<div class="example3"></div>
css:
.example3{ width:200px; height:150px; border-radius:50%; background:#8BC34A;}
3、自适应的半椭圆:沿横轴劈开的半椭圆
html:
<div class="example4"></div>
css:
.example4{width:200px;height:150px; border-radius:50%/100%100%00; background:#8BC34A;}
4、自适应的半椭圆:沿纵轴劈开的半椭圆
html:
<div class="example5"></div>
css：
.example5{width:200px; height:150px; border-radius:100%00100%/50%; background:#8BC34A;}
５、四分之一椭圆
html:
<div class="example６"></div>
css：
.example6{ width:160px; height:100px;border-radius:100% 0 0 0;background:#8BC34A;}
6、用椭圆绘制opera浏览器的logo（示例借鉴）
思路：绘制opera浏览器的logo,分析起来不难，就只有两个图层，一个是最底部的椭圆，一个是最上面那层的椭圆。先确定一下最底层的椭圆宽高，量了一下，水平宽度为258px，垂直高度为275px，因为其是一个对称的椭圆，没有倾斜度，故4个角均为水平半径为258px，垂直半径为275px的4个相等椭圆，用同样的办法确定最里面的椭圆的半径，因此，四个角均为水平半径120px，垂直半径为229px的椭圆，代码如下：
html:
<div class="opera">
<div class="opera-top"></div>
</div>
css:
.opera{
width:258px;
height:275px;
background:#F22629;
border-radius:258px258px258px258px/275px275px275px275px;
position:relative;
}
.opera-top{
width:112px;
height:231px;
background:#FFFFFF;
border-radius:112px112px112px112px/231px231px231px231px;
position:absolute;
left:50%;
right:50%;
top:50%;
bottom:50%;
margin-left:-56px;
margin-top:-115px;
}
如有错误，请大家多多指教！
