篇我们将着重介绍css的径向渐变，注意它和线性渐变的区别。

径向渐变 —— radial-gradient

径向渐变与线性渐变的不同之处在于它从一个点开始向外散发。CSS渐变通常用于模拟光源，我们知道它并不总是直的。这使得径向渐变中颜色之间的过渡看起来更加自然。

为了创建一个径向渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：

参数说明：

<position>：用来定义径向渐变的圆心位置，类似background-position，默认为center。可用关键字top、left、bottom、right、center、<length>、<percentage>或者同时使用2个关键字表示那个角如：top left（左上角）。

<angle>是角度，单位为deg。

<shape>：定义径向渐变的形状，有两个可选值“circle”（圆形）和“ellipse”（椭圆）。

<size>：用来确定径向渐变的半径长度大小，默认值为“farthest-corner”，其他值：

• closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
• closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
• farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
• farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

<stop > = <color> [ <length> | <percentage>]:

<color>：指渐变得起止颜色。

<length>：用长度值指定起止色位置，不允许负值。

<percentage>：用百分比指定起止色位置。

最基本的径向渐变

我们没有声明任何属性，只设置了2种颜色，如下示例：

.gradient {
  background-image:
    radial-gradient(
      #fff000,
      #e52e71
    );
}

如上图，颜色从中心点向外扩散，这就是最简单的径向渐变。

改变形状

径向渐变默认是ellipse（椭圆）的，我们还可以使渐变的形状改变成circle（圆形），如下示例：

background-image:
    radial-gradient(
      circle,
      #fff000,
      #e52e71
    );

为了更好地观察圆形和椭圆的区别，看如下动画，从椭圆变成圆形：

改变圆心位置

用来定义径向渐变的圆心位置，类似background-position，默认为center，除此还可以使用top、left、bottom、right、center、<length>、<percentage>等值。以及提供两个命名值（例如 top center）的组合表示圆心的位置。

如下示例：

/*圆心在左边中心*/
background-image:
    radial-gradient(
      circle at top right,
      #0000ff,
      #e52e71
);

/*圆心在右上角*/
background-image:
    radial-gradient(
      circle at top right,
      #0000ff,
      #e52e71
);

/*圆心在距离左边100px位置*/
.gradient{
  height:300px;
  width:300px;
  background-image:
    radial-gradient(
      at 100px,
      #0000ff,
      #e52e71
    );
}

/*圆心在距离左边30%位置*/
.gradient{
  height:300px;
  width:300px;
  background-image:
    radial-gradient(
      at 30%,
      #0000ff,
      #e52e71
    );
}

使用多个颜色

径向渐变也可以设置多个颜色的渐变,每种颜色以逗号隔开，如下示例：

background: radial-gradient(lime, red ,cyan, yellow );

改变颜色的结束位置

和线性渐变一样，径向渐变的颜色也可以改变其结束位置，如下示例：

background-image:
    radial-gradient(
      red 28px, blue 80%, green
    );

创建实线

使其相邻颜色的结束位置一样，如下示例：

background: radial-gradient(cyan 50%, red 50% );

色带和条纹

创建一个径向的色带，如下示例：

.multiposition-stops {
   background: radial-gradient(
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
}
或
.multiposition-stops {
   background: radial-gradient(
       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}

我们将上面的每种颜色的结束位置改成等于后面颜色的开始位置，就会形成径向的条纹效果，如下示例：

background: radial-gradient(
       lime 20%, red 20% 45%, cyan 35% 70%, yellow 70% );

改变渐变的半径长度

用来确定径向渐变的结束形状大小，默认值为“farthest-corner”，其他值：

• closest-side：指径向渐变的半径长度为从圆心到离圆心最近的边；
• closest-corner：指径向渐变的半径长度为从圆心到离圆心最近的角；
• farthest-side：指径向渐变的半径长度为从圆心到离圆心最远的边；
• farthest-corner：指径向渐变的半径长度为从圆心到离圆心最远的角；

如下示例：

html：

<div class="grid">
  <div class="item gradient4">farthest-side(离圆心最远的边)</div>
  <div class="item gradient2">closest-side(离圆心最近的边)</div>
  <div class="item gradient1">farthest-corner(离圆心最远的角)</div> 
  <div class="item gradient3">closest-corner(离圆心最近的角)</div>
</div>

css：

/*指定径向渐变的半径长度为从圆心到离圆心最远的角*/
.gradient1 {
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, #f8f8f8); 
}
/*指定径向渐变的半径长度为从圆心到离圆心最近的边*/
.gradient2 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, #f8f8f8); 
}
/*指定径向渐变的半径长度为从圆心到离圆心最近的角*/
.gradient3 {
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, #f8f8f8);
}
/*指定径向渐变的半径长度为从圆心到离圆心最远的边*/
.gradient4 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, #f8f8f8); 
}

效果如下：

如上所示，就是渐变半径长度不同类型，注意这里如果圆心的位置在正中间，farthest-corner 和 closest-corner 一样，同理 farthest-side 与 closest-side也一样。

最后

到此已经介绍了径向渐变的使用方法，下面将会继续介绍其它渐变的使用方法，你可以关注我，继续学习其它渐变知识。

其它相关文章：

• css 线性渐变
• css 径向渐变
• css 圆锥渐变
• css 重复渐变

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://css-tricks.com/a-complete-guide-to-css-gradients/

<div class="coupon"></div>

.coupon { 
 position: relative; 
 width: 400px; 
 height: 160px; 
 margin: 50px auto; 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 }

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 8px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 ... 
 }

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 background-size: 200px 18px; 
 background-repeat-x: no-repeat; 
 ... 
 }

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px), 
 radial-gradient( 
 circle at 199px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 background-size: 200px 18px; 
 background-position: 0 0, 200px 0; 
 background-repeat-x: no-repeat; 
}

<div class="coupon">50元</div>

.coupon { 
 ... 
 font-size: 60px; 
 color: #fff; 
 font-weight: bold; 
 line-height: 160px; 
 padding-left: 60px; 
 box-sizing: border-box; 
 cursor: pointer; 
} 
.coupon::before { 
 position: absolute; 
 content: ""; 
 left: 240px; 
 top: 0; 
 bottom: 0; 
 width: 0; 
 border-left: 1px dashed #fff; 
} 
.coupon::after { 
 position: absolute; 
 content: "立即领取"; 
 font-size: 26px; 
 width: 70px; 
 top: 50%; 
 right: 2%; 
 transform: translate(-50%, -50%); 
 line-height: 40px; 
 letter-spacing: 5px; 
}

次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：

这样一个布局如何实现呢？

CSS 渐变几乎是无所不能的，什么的图形都能绘制，这里可以拆分一下，两个矩形，两个圆形，还有两个反向圆角，也就是 2 个 线性渐变，4 个径向渐变，示意如下：

最终实时效果如下（上面是原理图）

完整代码如下：