背景
马上中秋了,看着我的小伙伴都说要发月饼了,而我还没有收到任何的通知。
刚刚好我最近在上手css,这不就想着先画个月亮赏赏眼。说不定过几天就有了。
flag高高立起:如果我有月饼了,我立马写个文章画个月饼。
需求分析
- 一个月亮应该是个圆的;
- 月亮外面有光晕;
- 根据这2点我可以得到一个结论:月亮可以由一个圆+阴影;
- 圆是由正方形+
border-radius=50%
得到的; - 正方形就是高和宽相等。
操作步骤
那么就先画一个正方形
<style>
.zfx{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="zfx"></div>
再给他加一个圆角样式 border-radius:50%
,就是这样子
再给他来个蓝色阴影box-shadow: 35px 5px 5px blue;
,就变成了下面的样子
然后我们把原来的圆变成透明,修改css样式:background-color: transparent;
这样看起来就和月亮的形状类似了。接下来我们改个颜色。
改颜色的话,就是修改圆的背景色,修改css
样式: box-shadow: 35px 5px 5px yellow;
产出
整体的变化也截个图体验一下