在 HTML 中,你可以用一些简单的代码来制作各种有趣的效果。今天我们要介绍的是如何用 HTML 代码来制作一盏七彩灯。<div style= width: 100px; height:
在 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 代码来实现更多有趣的效果。
粉丝
0
关注
0
收藏
0