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

前言

上一篇文章学了css的线性渐变，这篇文章来学习下径向渐变。

注意⚠️：渐变用在background-color上无效，要用在background-image或者background。

渐变

径向渐变

background-image: radial-gradient(shape size at position, color1, color2, ...)

和线性渐变不同，径向渐变是从中心点向外扩散的渐变，呈圆形或者椭圆形扩散。

shape：渐变的形状，默认是ellipse（椭圆形）。还可以是circle（圆形）。

size：渐变的尺寸大小，有四种值。

farthest-corner：距离中心点最远的边缘的角，这个是默认值。
farthest-side：距离中心点最远的边缘的边
closest-corner：距离中心点最近的边缘的角
closest-side：：距离中心点最近的边缘的边

position：渐变的起点，默认是中心点。

center中心
top 从上往下径向渐变
bottom 从下往上径向渐变
也可以是百分比，比如10%,20%等

color1,color2,....: 渐变的颜色

下面通过例子来看看

从中心点向外椭圆渐变

    .box {
      width: 200px;
      height: 150px;
      background-image: radial-gradient(red, yellow, green);
    }

从中心点向外圆形渐变

    .box {
      width: 200px;
      height: 150px;
      background-image: radial-gradient(circle, red, yellow, green);
    }

再来看看渐变的半径区别，下面这个是渐变到最远的角，因为我设置中心是（70%，20%），那么最远的角就是左下角，渐变到左下角。

    .box {
      width: 200px;
      height: 150px;
      background-image: radial-gradient(farthest-corner at 70% 20%, red, yellow, green);
    }

下面这个是渐变到最远的边，因为我设置中心是（0%，50%），那么最远的边就是右边，渐变到右边。

    .box {
      width: 200px;
      height: 150px;
      background-image: radial-gradient(farthest-side at 0% 50%, red, yellow, green);
    }

还可以设置颜色百分比径向渐变，中心点在（0，0），红色渐变到20%，然后到30%的黄色，最后是绿色。

    .box {
      width: 200px;
      height: 150px;
      background-image: radial-gradient(farthest-side at 0% 0%, red 20%, yellow 20%, green);
    }

还可以在同一个元素设置多个径向渐变。用逗号分隔。

    .box {
      width: 200px;
      height: 200px;
      background-image:
        radial-gradient(circle at top, red, yellow, green, transparent),
        radial-gradient(circle at bottom, red, yellow, green, transparent);
    }

学习下css的渐变-径向渐变

前言

渐变

径向渐变