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

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

1. Battle #6 - Conic #31 - Equals

这一题的元素非常简单，两个半圆，所以我们可以自由发挥出很多种解题思路，这里我提供l两种思路：

思路一：

• 这里的半圆我们用我们的老朋友radial-gradient来实现，即通过边缘对圆形背景的遮挡来实现半圆
• 这里两个半圆虽然形状和大小是一样的，但是方向并不一样，所以我们无法使用box-shadow来实现，只能利用伪元素了（当然你再来一个div也不是不行）

代码：

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

思路二：

• 实现半圆，可不仅仅只能通过radial-gradient，别忘了我们的圆角属性border-radius就是专门用来实现这种的
• 因此思路二与思路一的唯一不同点就是半圆是通过border-radius来实现的，注意这里的圆角不是像圆一样设为50%，而是需要与他的width等长，在这里也就是100px

代码：

<div></div>
<style>
  body{
    background:#AA445F
  }
  div,div::before{
    content:'';
    position:absolute;
    width:100;
    height:200;
    background:#E38F66;
    left:225;
    top:50;
    border-radius:0 100px 100px 0
  }
  div::before{
    transform:rotate(180deg);
    top:0;
    left:-150;
    background:#F7EC7D
  }

2. Battle #6 Conic #32 - Band-aid

• 这题也是元素构成非常简单，所以解法也很多，解法的不同取决于中间小方块实现方式的不同，我在这里使用的是背景来实现
• 即通过linear-gradient来实现，不得不说，光是radial-gradient和linear-gradien这两个方法就能够为我们实现很多图形了

代码如下：

<div></div>
<style>
  div,div::before{
    content:'';
    position:absolute;
    transform:rotate(45deg);
    width:50;
    height:200;
    background: #A3A368;
    top:50;
    left:175
  }
  div::before{
    transform:rotate(90deg);
    top:0;
    left:0;
    background:linear-gradient(#F3AC3C 75px,0,#FBE18C 125px,0,#F3AC3C)
  }

3. 总结

由于本章这两题都很简单，导致这片文章的内容篇幅较小，所以我打算在这里顺便总结一下linear-gradient和radial-gradient的常用用法

1. linea-gradient

首先我们利用#32的例子来剖析：

linear-gradient(#F3AC3C 75px,0,#FBE18C 125px,0,#F3AC3C)

• 参数中有三种颜色，意味着有三种颜色参与了渐变，每一种颜色的后面紧跟着的是其开始的位置，再往后可以加上前后两种渐变颜色的中点位置（可选参数）
• 所以例子中的意思代表的意思就是：以#F3AC3C的颜色从75px开始，与#FBE18C的渐变中点在0，注意这里由于中点位置比开始位置小，所以他是直接以纯色填充的，后面紧接着的是#FBE18C颜色的纯色填充，最终以#F3AC3C颜色结束
• 如果这里只填写颜色，不填写开始位置或中点位置，那么各种颜色的区域将会均分容器的长度

在填写颜色之前，还可以设置渐变的方向，有几种不同的写法：

1. to + 方向

例如：linear-gradient(to left,blue,red)

意为从右到左发生渐变

也可以进行组合：

linear-gradient(to left top,blue,red)

意为从右下到左上发生渐变

2. deg

例如：linear-gradient(90deg,red,blue)

意为方向为默认方向逆时针旋转90度

3. turn

例如：linear-gradient(0.25turn,red,blue)

意为方向为默认方向逆时针旋转四分之一圈

默认方向是从上到下

2. radial-gradient

我们这里用#31中的例子

radial-gradient(circle at 0 50%,#E38F66 100px,0,#AA445F)

这里的意思是：渐变形状为圆形，渐变中心在0 50%的位置，有两种渐变颜色，第一种颜色的起始位置为100px，两种颜色的渐变中点在0处，所以为纯色填充（这里的规则与linear-gradient相同）

在颜色的前面可以设置形状参数

1. circle

意为渐变的形状为圆形

2. ellipse

意为渐变的形状为椭圆

3. closest-side/farthest-side

意为渐变形状的边缘（即结束位置）与离中心最近或最远的边相切

4. closest-corner/farthest-corner

意为渐变形状的边缘（即结束位置）与离中心最近或最远的角相切

如果不设置，默认的形状为宽高与容器宽高等比例的椭圆