html、css画太阳

画一个幼儿园级的太阳

    • 创建一个div
    • 取色
    • 取色
    • 光晕

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

创建一个div

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

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

取色

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

取色

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

#sun{
				width: 500px;
				height: 500px;
				background-color: #FF4500;
				border-radius: 50%;
				}

只需要把boder-radius设置成50%正方形就变成圆了,说到这里,我们平时看到一些按钮的图片时它们有的是矩形的,然是四个角又是圆润的。我们就可以利用这个来做到,只需要boder-radius:15px,就可以改变,px的值根据实际的盒子参数来调整。

光晕

既然是太阳,那么单单一个有颜色的圆当然是不够的,太阳是会发光的,我们就可以模拟太阳给这个圆的外围一圈光晕。

box-shadow:0 0 100px yellow;

在样式里添加box-shadow即可,设置好光晕的像素和颜色。我们的太阳就画出来了~
代码如下

!DOCTYPE html>

	
		
		太阳
		
	
	
		

你可能感兴趣的:(html,画圆)