1. Battle #2 - Visibility #16 - Eye of the Tiger

思路：

当我们看到这一题时，第一反应应该是：这个嵌套圆环可以用radial-gradient背景实现！没错，这一题只需要用一个简单的radial-gradient就可以实现啦~
再有就是外面的这个眼睛的造型，需要用到border来实现，将对角的圆角设为50%即可
最后只需要将整个div利用rotate进行旋转

代码：

<div></div>
<style>
  body{
    background:#0B2429
  }
  div{
    width:200px;
    height:200px;
    border-radius:50% 0;
    background:radial-gradient(circle,#0B2429 25px,0,#F3AC3C 70px,0,#0B2429 90px,0,#998235);
    margin:50px 92px;
    transform:rotate(45deg)
  }

2. Battle #2 - Visibility #17 - Fidget Spinner

相信很多小伙伴第一眼看到这题就被这中间的独特形状吓到了，这波浪结构要怎么实现吖，这也是这一题主要的难点。但是，作为一名优雅的程序员，千万不要被这种看似复杂的图形乱了阵脚，书写CSS代码的一大核心思想就是，用最简单的图形去构成最复杂的图案，那么这里的波浪线肯定就不是我们眼中的表象了，仔细想想是否可以通过一些拼凑，将其一点点画出呢？（这里我猜想可以通过clip-path直接进行切割画出，可惜我的功力还不够，不知道切割的路径要怎么定义，只能看评论区有没有CSS大佬了）

思路：

所以这里我是利用的拼凑的思想，想将其进行拆分，左一个圆，右一个圆，中间的怎么实现呢？我们很难画出内凹的弧形，但是可以很容易地实现外凸的弧形啊，所以我们是否能够利用上下两个弧形来对中间进行覆盖，从而实现“看似内凹”的弧形？
那么中间被覆盖的图形需要是什么形状呢？这里需要满足一下条件：

能够充满上下左右四个圆环中间的空隙位置
不会在各个圆环外面露出

所以我就想到了利用body背景来画出一个圆，然后对其进行覆盖

至于各个圆环，我们可以利用不同元素的border实现，也可以利用box-shadow实现，道路不止一条~我这里用的是box-shadow

代码：

<div></div>
<style>
  body{
    background:radial-gradient(#E78481 50px,0,#09042A);
    margin:67px 170px
  }
  div{
	width:60px;
    height:60px;
    border-radius:50%;
    box-shadow:0 60px inset #F5BB9C,
      		   0 0 0 10px #09042A,
      		   0 106px #F5BB9C,
      		   0 106px 0 10px #09042A,
      		   -60px 53px #09042A,
      		   -60px 53px 0 10px #E78481,
      		   60px 53px #09042A,
      		   60px 53px 0 10px #E78481
  }

不得不说，利用一个box-shadow就可以实现四个圆环，这个属性真的太香了~！

3. Battle #2 - Visibility #18 - Matrix

这么多图形！还全部都一样的形状大小！这还不直接box-shadow？！本着这种想法，我对着这幅图沉思了许久，要让阴影也是扇形，怎么就这么难呢（如果有大佬知道怎么解决这个问题欢迎在评论区指点指点~）

在碰壁多次后，我决定换一个思路，于是想到了在实际开发中经常用到的flex布局！

思路：

既然都用flex了，那么这12个图案肯定也都是真是存在的元素，所以需要12个div（有些小伙伴可能按奈不住了：12个？？？没错，就是12个！虽然12看起来很多，但是实际写下来，你会发现其实最终的代码量也不多）
然后就是需要画出扇形，这个相信大家也已经很熟练了，那就是直接利用我们的border属性
还有一个问题便是我们的颜色，我们会发现所有div的颜色有两种，那么这里就又可以用到一个选择器:nth-child便能够解决了

代码：

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<style>
  body{
    margin:0;
    height:300px;
    background:#5C434C;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:space-around;
    align-items:center
  }
  div{
    width:80px;
    height:80px;
    background:#F09462;
    border-radius:80px 0 0
  }
  div:nth-child(even){
    background:#F5D6B4
  }

注意： 这里有一个小细节需要注意，那就是为了能够仅用一个奇数子元素选择器来实现对不同颜色的把控，我们需要将flex布局的排列方式变为column，因为如果按列排序，刚好奇数位置的元素颜色都一样，但如果按行排序，则不能通过这个选择器进行颜色的设置

CSSBattle专题-6（#16-#18）

1. Battle #2 - Visibility #16 - Eye of the Tiger

2. Battle #2 - Visibility #17 - Fidget Spinner

3. Battle #2 - Visibility #18 - Matrix