html+css制作月亮

制作月亮的原理很简单，主要就是通过阴影属性 box-shadow来实现的
w3c中的介绍是这样的：

必须的元素是 h-shadow和v-shadow，主要控制水平方向的阴影和垂直方向的阴影。其实通过调节我们可以得到月亮的各种状态

主要原理就是添加一个圆形，然后再给它添加阴影，最后再将圆形的背景设置为transparent，transparent是css3中的一个透明属性。

话不多说，直接上代码

<div class="moon"> </div>

.moon{
  position:absolute;
	left:560px;
  top:20px;
  width:100px;
  height:100px;
  background-color:transparent;
  border-radius:50%;
  box-shadow:20px 10px 0px 0px #FFFF00;
}

通过调节一些属性我们可以得到更好的效果。