用css3画圆以及椭圆

1、先在页面中加入一个div

<div id="dd">

</div>

2、先话正方形，定义div的width和height，以及background

#dd {

            width: 200px;

            height: 100px;

            background: red;

        }

3、然后增加border-radius属性，让div呈圆形

border-radius的值改成50%也行，反正也是正方形边的一半

这样做的原理是，“正方形的内切圆的半径等于正方形边长的一半”。radius是半径的意思。

border-radius: 100px/50px;

4、修改width值为200px，然后把border-radius改成100px / 50px;

"/"之前的是水平半径，"/"之后的是垂直半径，所以 100px / 50px就让div成了椭圆

border-radius: 100px/50px;