1. Battle #1 - Pilot Battle #3 - Push Button

当我第一次看到这个图案时，其实我想到的第一种解决方案是利用一个div代表深蓝色的矩形，而中间的圆形使用伪元素before和after，通过border-radius和border来实现多层圆环
后来询问大佬发现可以通过radial-gradient来实现多层圆环的背景，在MDN上查阅了之后，得知这个方法一般用于生成渐变色，及两个或多个颜色间的过渡
该方法的第一个参数传递的是颜色延伸的形状shape，如果没有声明，将会默认按照容器的宽高同比例的椭圆进行延伸，如图：

所以如果需要实现题目中圆形的效果，则需要将shape参数设置为circle，此外还可以设置圆形的圆心点位置，但是由于该题目圆形在正中间，所以没有必要设置（默认是在容器中心）

后续的参数是【颜色+开始位置，结束位置】的列表，同时需要在最后设置最终的颜色（颜色变化的终点）

注意：

如果结束位置>开始位置，则颜色正常发生渐变
如果结束位置<开始位置，则颜色不会发生渐变，而是从渐变中心到开始位置填充上纯色

代码：

<div ></div>
<style>
  body{
    background:#6592CF;
    margin:75px 50px
  }
  div{
    width:300px;
    height:150px;
    background:radial-gradient(circle,#EEB850 25px,0,#243D83 75px,0,transparent 125px,0,#243D83)
  }

思路：

利用一个div，设置好宽高
通过radial-gradient()方法设置div的背景，并且需要纯色填充，所以结束位置都直接设置为0（这种思路在后续也是经常用到的）

2. Battle #1 - Pilot Battle #4 - Ups n Downs

这一题有多种方法：利用伪元素、利用伪元素+box-shadow或者直接暴力三个div

暴力法：这种方法没啥可说的hhh
伪元素：

<div></div>
<style>
  body{
    background:#62306D;
    margin:50px 150px
  }
  div,div::after,div::before{
    width:100px;
    height:100px;
    background:#F7EC7D;
    border-radius:50% 50% 0 0
  }
  div::after{
    content:'';
    position:absolute;
    transform:translate(100px,100px) rotate(180deg)
  }
  div::before{
    content:'';
    position:absolute;
    transform:translate(-100px,100px) rotate(180deg)
  }

注意： 使用伪元素时需要指定content内容（一般设置为空串）才能够显示

这里还使用到了transform：translate用于移动元素，rotate则用于旋转 （旋转会将该元素的坐标轴一同发生旋转）

伪元素+box-shadow：

<div></div>
<style>
  body{
    background:#62306D;
    margin:50px 150px
  }
  div,div::after,div::before{
    width:100px;
    height:100px;
    background:#F7EC7D;
    border-radius:50% 50% 0 0
  }
  div::after{
    content:'';
    position:absolute;
    transform:translate(100px,100px) rotate(180deg);
    box-shadow: 200px 0 #F7EC7D
  }

在碰到类似这种有相同图案的题，其实大部分时候都需要想到box-shadow，这会让我们的的代码简洁不少！！！

由于伪元素的坐标体系也发生了旋转，所以在虽然需要生成的阴影看似在左边，水平方向的距离也为正值

3. Battle #1 - Pilot Battle #4 - Acid Rain

这里看到重复类似的元素，第一反应想到的还是伪元素（当然暴力三个div也可以），同时也需要注意各个元素的Z轴权重（z-index）来决定谁盖住谁

<div></div>
<style>
  body{
    background:#0B2429;
    margin:90px 140px
  }
  div,div::before,div::after{
    width:120px;
    height:120px;
    background:#998235;
    border-radius:50% 0 50% 50%
  }
  div::before{
    content:'';
    position:absolute;
    background:#F3AC3C;
    top:150px;
    left:80px
  }
  div::after{
    content:'';
    position:absolute;
    background:#F3AC3C;
    border-radius:50%;
    top:30px;
    left:200px;
    z-index:-1
  }

这里利用border-radius()作出水滴的形状，参数除了只传入一个之外，还可以传入四个参数，依次代表的是左上、右上、右下、左下的圆角
当然这里也可以使用box-shadow（左边两个图案大小形状一模一样），不过还是需要设置好z-index
所以这里需要给各个元素开启定位（开启了定位才能够设置z-index），并设置各自的top和left来进行定位

哈喽~这里是Crizz的前端之旅

CSSBattle专题持续更新中~

CSSBattle专题-2（#3-#5）

1. Battle #1 - Pilot Battle #3 - Push Button

2. Battle #1 - Pilot Battle #4 - Ups n Downs

3. Battle #1 - Pilot Battle #4 - Acid Rain