持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

所有CSSBattle专题文章收录于专栏：CSSBattle专栏

1. Battle #4 - Display #25 - Blossom

思路：

• 看到这道题的第一眼，第一反应就是box-shadow，但是仔细看了看，就发现没那么简单，因为对应颜色的叶子是镜像翻转的，所以好像box-shadow无法实现啊！
• 所以第一步应该解决的就是这个镜像反转的问题了，解决了镜像反转，那么这题就迎刃而解了。那么提到翻转，我相信小伙伴应该都能想到transform中的rotate吧，但是他是基于二维平面的翻转，如果想要镜像反转，就需要在三维坐标系中操作，此时就需要rotateY方法了，该方法可以使元素基于三维坐标系中的Y轴进行翻转
• 最后就是容器选择的问题，因为有四个叶子，而且不能使用box-shadow，所以这里我使用了两个div，分别赋予了一个class属性，方便书写样式

代码：

<div class="a"></div>
<div class="b"></div>
<style>
  body{
    background:#998235
  }
  .a,.a::before{
    position:absolute;
    content:'';
    width:80;
    height:100;
    border-radius:0 50px;
    background:#1A4341;
    top:60;
    left:110
  }
  .a::before{
    transform:rotateY(180deg);
    top:80;
    left:100
  }
    .b,.b::before{
    position:absolute;
    content:'';
    width:80;
    height:60;
    border-radius:50px 0;
    background:#F3AC3C;
    top:60;
    left:210
  }
  .b::before{
    transform:rotateY(180deg);
    top:120;
    left:-100
  }

2. Battle #4 - Display #26 - Smiley

这一题我提供两种思路，一种是规规矩矩地使用div+伪元素，一种则是不用div直接使用body的背景绘制

思路一（div+伪元素）：

• 需要注意这里的半圆环不能够通过box-shadow来实现，因为是通过背景画出的，无法通过阴影映射
• 所以还是需要利用伪元素，利用radial-gradient来画出半圆环
• 最后再通过rotate和定位来实现另外的两个半圆环

代码：

<div></div>
<style>
  body{
    background:#6592CF
  }
  div,div::before,div::after{
    position:absolute;
    top:200;
    left:140;
    width: 120;
    height: 120;
    background: radial-gradient(circle at 50% 0,transparent 40px,0,#060F55 60px,0,#6592CF)
  }
  div::before,div::after{
    content:'';
    transform:rotate(180deg);
    top:-220;
    left:100
  }
  div::after{
    left:-100
  }

思路二（纯背景实现）：

• 这里的圆环和中间的矩形都可以通过body的背景来实现
• 这里需要注意的是，尽可能的利用透明色transparent，防止挡住其他背景
• 最重要的一点，就是要注意各个部分的

代码：

<style>
  body{
    background: linear-gradient(transparent 100px,0,#6592CF 200px,0,transparent),
      			radial-gradient(circle at 100px 100px,#6592CF 40px,0,#060F55 60px,0,transparent),
      			radial-gradient(circle at 300px 100px,#6592CF 40px,0,#060F55 60px,0,transparent),
      			radial-gradient(circle at 200px 200px,#6592CF 40px,0,#060F55 60px,0,transparent),
      			#6592CF
  }

3. Battle #4 - Display #27 - Lock Up

本题唯一需要用脑思考的就是这两个黄色的断续的圆环，这里我提供两种思路

思路一：

• 将右上和左下看成两个容器（如图）：

• 此时我们只需要利用radial-gradient将circle的定位设置在角落处即可
• 此外我是用的是div+伪元素，然后对其中一个进行rotate旋转即可

<div></div>
<style>
  body{
    background:radial-gradient(circle at 50% 50%,#AA445F 100px,0,#E38F66)
  }
  div ,div::before{
    position:absolute;
    width: 200;
    height: 150;
    top:0;
    left:200;
    background:radial-gradient(circle at 0 100%,#AA445F 40px,0,#F7EC7D 70px,0,transparent)
  }
  div::before{
    content:'';
    top:150;
    transform:rotate(180deg);
    left:-200
  }

思路二：

• 将左上和右下看成两个容器（如图）：

• 这里因为div是方的，如果想要有圆弧效果，可以考虑我们目前为止第一次用的overflow，将其设置为hidden，意为超出父容器的部分不可见
• 所以这里需要三个div，一个父容器，两个子容器
• 至于黄色的圆环利用父容器的背景实现即可

<div class="a">
	<div class="b"></div>
	<div class="c"></div>
</div>
<style>
  body{
    background:#E38F66;
    margin:50px 100px
  }
  .a{
    width:200;
    height:200;
    border-radius:50%;
    background:radial-gradient(#AA445F 40px,0,#F7EC7D 70px,0,#AA445F);
    overflow:hidden
  }
  .b,.c{
    width:100;
    height:100;
    background:#AA445F
  }
  .c{
    margin-left:100
  }

4. Battle #4 - Display #28 - Cups & Balls

思路：

• 这一题我们第一眼就能够发现有很多的重复元素，所以应该尽可能地使用box-shadow来实现
• 我们会发现共有三种不同的类型，刚好利用一个div+两个伪元素即可
• 在设置阴影的同时设置不同的颜色

<div></div>
<style>
  body{
    background:#1A4341
  }
  div{
    width:50;
    height:50;
    border-radius:50%;
    box-shadow: 62px 82px #998235,
      		132px 152px #998235,
      		202px 152px #F3AC3C,
      		272px 82px #F3AC3C
  }
  div::before,div:after{
    content:'';
    position:absolute;
    width:50;
    height:50
  }
  div::before{
    border-radius:0 0 50% 50%;
    box-shadow:62px 152px #F3AC3C,272px 152px #998235
  }
  div::after{
    border-radius:50% 50% 0 0;
    box-shadow:132px 82px #F3AC3C,202px 82px #998235
  }