1. Battle #5 - Inline #29 - Suffocate

这一题的评判标准有点怪，我试了三种方法，最终的效果也可以说是毫无区别，可还都是99.9%match，我表示也无能为力了。因为这一章只有两题，所以我这里就把三种思路都提供一下吧

思路一：

我们说过，看到这种内凹的圆形，应该想到两种方法，一种是利用别的圆形来覆盖，另一种就是利用背景的radial-gradient，这里第一种思路我利用的是覆盖的方法
将中间的绿色圆用body的背景来实现，然后再通过div+shadow绘制出四个黄色的圆形，至于中间的绿色为什么是圆呢，当然是因为圆比正方形好实现啦（在背景中）

代码：

<div></div>
<style>
  body{
    background:radial-gradient(circle,#1A4341 100px,0,#F3AC3C)
  }
  div{
    position:absolute;
    width:200;
    height:200;
    border-radius:50%;
    background:#F3AC3C;
    top:-50;
    left:0;
    box-shadow:0 200px #F3AC3C,
      		   200px 0 #F3AC3C,
      		   200px 200px #F3AC3C
  }

思路二：

第二种思路也是利用覆盖的方法，只不过圆形都是利用box-shadow画出的
跟以往一样，涉及到阴影的覆盖，我们需要考虑好其书写的顺序，写在越前面，其覆盖优先级就越高，即越上层
因此这里我们不能将中间的绿色作为div，因为他是要被覆盖的，而是去任意一个黄色的圆形为div，并且绿色的阴影要写在最后，让他被所有的黄色圆形所覆盖

代码：

<div></div>
<style>
  body{
    background:#F3AC3C
  }
  div{
    position:absolute;
    top:-50;
    left:0;
    width:200;
    height:200;
    border-radius:50%;
    box-shadow: 0 200px #F3AC3C,
      			200px 0 #F3AC3C,
      			200px 200px #F3AC3C,
      			100px 100px #1A4341
  }

思路三：

第三种思路就是利用背景来实现内凹圆的了
通过radial-gradient中的circle at x y定位来设置圆所在的位置
需要注意的是在绘制圆形背景的时候应该以transparent结尾，否则会将中间的绿色覆盖

代码：

<div></div>
<style>
  body{
    background:#F3AC3C;
    margin:50 100
  }
  div{
    width:200;
    height:200;
    background: radial-gradient(circle at 0 0,#F3AC3C 100px,0,transparent),
      			radial-gradient(circle at 100% 0,#F3AC3C 100px,0,transparent),
      			radial-gradient(circle at 100% 100%,#F3AC3C 100px,0,transparent),
      			radial-gradient(circle at 0 100%,#F3AC3C 100px,0,transparent),
      			#1A4341
      
  }

2. Battle #5 - Inline #30 - Horizon

这一题也是异常简单的一题了，相信小伙伴们一眼就能够看出，只要利用一个body背景的linear-gradient就可以轻松解决了

代码如下：

<style>
  body{
    background:linear-gradient(#F7EC7D 50px,0,#E38F66 100px,0,#AA445F 200px,0,#62306D)
  }

但是就这么解决了好像又有点没意思了，那就来点不一样的吧，这里我们用一下box-shadow的进阶用法：inset
inset是让阴影在内部显示的一个属性，具体的显示规律大伙可以亲自尝试或者在MDN上查阅
那么这里其实就相当于可以直接利用body的多个阴影来实现了，只不过记得设置body的外边距为0，因为默认是有外边距的，这样阴影就不能填充满整个画布了

代码：

<style>
  body{
    margin:0;
    box-shadow: inset 0 50px #F7EC7D,
      			inset 0 100px #E38F66,
      			inset 0 200px #AA445F,
      			inset 0 300px #62306D
  }

那既然都用到box-shadow，我们何不利用这题在复习一下box-shadow的另一个参数：阴影半径呢？
我们看到这几个方块的高度是不一样的，又因为他们的宽度刚好是占满画布的，因此如果我们增大阴影半径，虽然也会增大其宽度，但是却不会影响它显示的宽度，每个阴影的宽度还是一样的，所以我们就可以大胆地通过设置其阴影半径来调节其高度了！

代码：

<div></div>
<style>
  body{
    margin:0
  }
  div{
    width:400;
    height:50;
    background:#F7EC7D;
    box-shadow: 0 50px #E38F66,
      			0 125px 0 25px #AA445F,
      			0 225px 0 25px #62306D
  }

CSSBattle专题-10（#29-#30）——box-shadow YYDS！

1. Battle #5 - Inline #29 - Suffocate

2. Battle #5 - Inline #30 - Horizon