CSS box-shadow和border-radius创建一个月亮

学习最好的方法，就是把你知道的告诉别人

我们来看如何把这个正方形一步一步变成🌙的。

原本是正方形

这是它的样式代码：

div{
  width: 100px;
  height: 100px;
  
  background-color: blue;
  border-radius: 0px;
  box-shadow: 25px 10px 10px 10px green; 
}
  

有关box-shadow的5个参数可以看这篇文章：
https://www.jianshu.com/p/3b1b1ec577b3

下面来通过层层剥析，寻找答案：

第1步：设置元素为圆形

div{
  width: 100px;
  height: 100px;
  
  background-color: blue;
  border-radius: 50%;
  box-shadow: 25px 10px 10px 10px green; 
}

第2步：设置元素的模糊距离和阴影的尺寸为0：

div{
  width: 100px;
  height: 100px;
  
  background-color: blue;
  border-radius: 50%;
  box-shadow: 25px 10px 0 0 green; 
}

第3步：设置元素的背景色为无色：

div{
  width: 100px;
  height: 100px;
  
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 25px 10px 0 0 green; 
}

看到神奇的地方了吗？是不是很简单？其实就是用元素盖住一部分的box-shadow而已嘛。