[分享]用html代码制作七彩灯

在 HTML 中，你可以用一些简单的代码来制作各种有趣的效果。今天我们要介绍的是如何用 HTML 代码来制作一盏七彩灯。这段代码中，我们首先用 div 标签来创建一个圆形的区域，设置它的宽高为 100...

在 HTML 中，你可以用一些简单的代码来制作各种有趣的效果。今天我们要介绍的是如何用 HTML 代码来制作一盏七彩灯。

<div style="width: 100px; height: 100px; border-radius: 50%; margin: 50px auto; box-shadow: 0 0 25px #fff, 0 0 50px #fff, 0 0 75px #fff, 0 0 100px #fff, 0 0 150px #FF00FF, 0 0 200px #FFA500, 0 0 300px #FFFF00;"></div>

这段代码中，我们首先用 div 标签来创建一个圆形的区域，设置它的宽高为 100px，设置为圆形的方式是用 border-radius: 50% 来实现的。接着，我们用 margin: 50px auto 将它水平居中。

然后，我们使用 box-shadow 属性来添加多个阴影来实现七彩灯的效果。阴影的颜色可以自己根据需要进行修改，这里我们使用了紫色、橙色、黄色三种颜色。

代码中的 </div> 表示结束标记，代码中所有的标签都需要有开始标记和结束标记。

这样，我们就完成了一个七彩灯的制作。欢迎大家尝试用 HTML 代码来实现更多有趣的效果。