html、css画太阳

这篇博客介绍了如何使用HTML创建一个div,并通过CSS将其转换为太阳的形状。内容包括设置div的宽高、选择合适的背景颜色,使用Screen Color Picker工具进行取色,通过设置border-radius将正方形变为圆形以模拟太阳的主体,最后添加box-shadow效果来创建太阳的光晕,从而完成太阳的绘制。
摘要由CSDN通过智能技术生成

画一个幼儿园级的太阳


21世纪是科技的时代,计算机在我们生活中的各个角落都涂抹上了它们的色彩。计算机给人类带来了很多便捷,让我们渐渐放弃了原始的工具。画画也不需要再利用笔这种贯穿古今的工具就能做到。当然了,画出各种高大上的图,不是我们这些小菜鸟需要操心的事情。我们今天只需要画一个太阳就可以了,是的,幼儿园级别的那种~~

创建一个div

<div class="sun"></div>

再利用css来调整,给sun一个宽高,记得宽高一致,是的,就是一个正方形。再给一个看起来像太阳的背景色。

#sun{
				width: 500px;
				height: 500px;
				background-color: #FF4500;
		}

取色

说到颜色如果你有一个喜欢的颜色或者说你在某一张图片中看到了自己喜欢的颜色,但是不知道怎么截取出来,那么你就需要一款简单方便的取色工具了。Screen Color Picker是我习惯用的一个工具,截图取色都非常方便。
在这里插入图片描述
截取的颜色是十六进制的,记得使用的时候在前面加上#

取色

关键点来了,怎样让这个四四方方的正方形变成一个圆呢~ 其实非常简单,一行代码就做到了。

#sun{
				width: 500px;
				height: 500px;
				backgr
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值