1、第一步：首先我们在桌面上新建一个文件夹用来保存html文档。
2、第二步：打开dobe Dreamweaver软件，并新建一个html文档后保存到新建的文件夹中。
3、第三步：我们在<body>标签的中间写一个div布局标签:
<div id="circle"></div>
4、第四步：在<head>标签的中间写上样式
<style>
#circle{}
</style>
5、第五步：接着开始写#circle{ }的样式。
#circle{ width:300px; height:300px; border:30px solid #FC3;
border-radius:50%;
}
6、第六步：此时我们在IE浏览器中可以看到，是一个单色圆环。
7、第七步：现在设置四色圆环。继续写样式：
#circle{ width:300px; height:300px; border:30px solid #FC3;
border-radius:50%;
border-top-color:#F93;
border-right-color:#F33;
border-bottom-color:#3C6;
border-left-color:#000;
}
8、第九步：写完保存后，我们在浏览器中预览，可以看到四色圆环已经设置完成，达到了我们预期的效果。
9、总结：
1、设置圆环首先保证width和height的数值一样。
2、先设置单色圆环的关键是：border-radius:50%
3、设置四色圆环的关键是设置：border-top/right/bottom/left-color:颜色值
