HTML怎么制作四色圆环

HTML怎么制作四色圆环

网页设计语言HTML和CSS的结合，能够实现非常多效果，比如制作一些色彩圆环等，那么怎么通过HTML和CSS制作一个四色圆环呢，下面就随我一起来实际操作吧。

第一步：首先我们在桌面上新建一个文件夹用来保存html文档。

第二步：打开dobe Dreamweaver软件，并新建一个html文档后保存到新建的文件夹中。

第三步：我们在标签的中间写一个div布局标签:

第四步：在标签的中间写上样式

第五步：接着开始写#circle{ }的样式。

#circle{ width:300px; height:300px; border:30px solid #FC3;

border-radius:50%;

}

第六步：此时我们在IE浏览器中可以看到，是一个单色圆环。

第七步：现在设置四色圆环。继续写样式：

#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;

}

第九步：写完保存后，我们在浏览器中预览，可以看到四色圆环已经设置完成，达到了我们预期的效果。

总结：

1、设置圆环首先保证width和height的数值一样。

2、先设置单色圆环的关键是：border-radius:50%

3、设置四色圆环的关键是设置：border-top/right/bottom/left-color:颜色值