1、新建一个html页面，然后在页面上添加div标签。如图：
2、创建圆的样式。在title标签下新建一个<style type="text/css"></style>标签，然后在标签内容新建一个circle类，在circle类设置内容为：
width: 100px; height: 100px; background-color:red; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;
如图：
3、使用浏览器查看效果。把html文件保存后，使用浏览器打开就可以看到圆的效果了。如图：
4、所有代码：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>圆</title> <style type="text/css"> .circle{ width: 100px; height: 100px; background-color:red; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } </style></head><body> <div class="circle"></div></body></html>
