3.circle （圆）

1.HTML代码：

<div class="circleOne"></div>
<br/>
<div class="circleTwo"></div>

2.CSS代码：

.circleOne{
  /* 让其居中 */
  margin: auto;
  width:150px;
  height:150px;
  border:1px solid blue;
  border-radius:%;
}
.circleTwo{
  /* 让其居中 */
  margin: auto;
  /* 改变其x轴的长 */
  width:50px;
  /* 改变其y轴的长 */
  height:200px;
  border:1px solid blue;
  border-radius:%;
}

3.效果图：

4.2D旋转地址：http://www.w3school.com.cn/css3/css3_2dtransform.asp

.circleTwo{
   /* 让其旋转 */
  transform: rotate(30deg);
  /* 让其居中 */
  margin:0 auto;
  /* 改变其x轴的长 */
  width:50px;
  /* 改变其y轴的长 */
  height:200px;
  border:1px solid blue;
  border-radius:50%;
}