详谈CSS3渐变

一、线性渐变

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: repeating-linear-gradient(direction, color-stop1, color-stop2, ...); //重复绘制渐变

• 第一个参数：
  direction：方向，可选，默认为从上到下

• 第二个参数：
  start-color：定义开始颜色
  stop-color：定义结束颜色

1. 第一个参数

第一个参数为空时默认方向为从上到下。例如：

background-image: linear-gradient(#69f, #fd44ff);

显示的效果为：

linear1.png

• 方向的关键字为：
  to bottom ：从上到下
  to right：从左到右
  to left：从右到左
  to top：从下到上
  to top left：从右下角到左上角
  to top right：从左下角到右上角
  to bottom left：从右上角到左下角
  to bottom right：从右下角到左上角

例如：

background-image: radial-gradient(to right, #69f, #fd44ff);
background-image: radial-gradient(to top right, #69f, #fd44ff);

该代码同时可以用角度写为：

background-image: radial-gradient(90deg, #69f, #fd44ff);
background-image: radial-gradient(45deg, #69f, #fd44ff);

显示效果如下：

linear3.png

2. 第二个参数

第二个参数为颜色 & 位置，颜色可为多个，每个颜色可写2个位置的值。
每个颜色的位置对应的是该颜色的起始过渡颜色。如：

background-image: linear-gradient(#69f 20%, #fd44ff);
background-image: linear-gradient(#69f 50%, #fd44ff);
background-image: linear-gradient(#69f 20%, #fd44ff 80%);
background-image: linear-gradient(#69f 50%, #fd44ff 50%);

显示效果为：

linear2.png

我们还可以配置多种颜色，及颜色都配置起止值，例如:

background-image: linear-gradient(#69f 25%,#fd44ff 50%,#f64f59 75%, #fbd786);
background-image: linear-gradient(#69f 25%,#fd44ff 20% 50%,#f64f59 50% 75%, #fbd786 75%);
}

以上代码显示的效果分别如下：

linear5.png

3. 重复渐变

重复渐变用于创建重复的线性渐变 "图像"。
利用重复的渐变，我们可以实现loading效果：

.loading{
    margin: 100px;
    width: 400px;
    height: 20px;
    background: repeating-linear-gradient(45deg, #fff, 20%, #000 20% 40%);
    background-size: 20%;
    border: solid 1px #000;
    animation: run 5s linear infinite both;
}
@keyframes run{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 100% 0;
    }
}

linear-gif.gif

以及重复的线条，比如棋盘。

.chess {
    width: 300px;
    height: 300px;
    background: #eac991;
    background-image: repeating-linear-gradient(transparent 0 19px, #333 20px), repeating-linear-gradient(to right, transparent 0 19px, #333 20px);
    border: solid 3px #333;
    border-radius: 3px;
    position: relative;
    &:after{
        width: 15px;
        height: 15px;
        position: absolute;
        border-radius: 50%;
        background: #000;
        content: '';
        left:92px;
        top: 92px;
        box-shadow: 0 22px 0 #000, 20px 22px 0 #fff, 20px 41px 0 #fff, -20px 22px 0 #fff, -20px 41px 0 #000, 41px 41px 0 #000
    }
}

linear-chess.png

地址：https://codepen.io/jianxiujiucan/pen/poJzxVP

二、径向渐变

语法:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

• 第一个参数：
  shape：shape定义形状（圆形或椭圆），可选，默认为椭圆
  size：半径大小，可选
  position：定义圆心位置，可选，默认为形状的中心点

• 第二个参数：
  start-color：定义开始颜色
  stop-color：定义结束颜色

1. 第一个参数

1.1 第一个参数可忽略不写，为空时默认为椭圆，圆心位置为形状的中心，半径为形状的对角线的一半。
例如：

 background-image: radial-gradient(#69f, #fd44ff);

以上代码等同于：

 background-image: radial-gradient(ellipse, #69f, #fd44ff);

radial1.png

1.2 shape：如果我们要设置为圆形，则加关键字cricle：

 background-image: radial-gradient(cricle, #69f, #fd44ff);

radial2.png

1.3 size：如果写一个参数则为圆形，写两个参数（参数值不相同）则为椭圆：

background-image: radial-gradient(100px, #69f, #fd44ff);  //半径为100px的圆
background-image: radial-gradient(200px 100px, #69f, #fd44ff);  //长轴为200px，短半轴为100px的椭圆

radial3.png

1.4 position：圆心位置，位置的数值可以为：at center、 at top、 at right、 at bottom、at left、at top left、at top right、at bottom left、 at bottom right。

例如：

background-image: radial-gradient(at top, #69f, #fd44ff); // 圆心在顶端中间位置
background-image: radial-gradient(at top right, #69f, #fd44ff); // 圆心在右上角位置

如图所示：

image.png

圆心位置也可以为具体数值，上面代码等同于：

background-image: radial-gradient(at 150px 0, #69f, #fd44ff); 
background-image: radial-gradient(at 300px 0, #69f, #fd44ff); 

我们还可以指定渐变终止点位置(closest-side、closest-corner、farthest-side、farthest-corner)。

closest-side 渐变中心距离容器最近的边作为终止位置。
farthest-side 渐变中心距离容器最远的边作为终止位置。
closest-corner 渐变中心距离容器最近的角作为终止位置。
farthest-corner 渐变中心距离容器最远的角作为终止位置。

如果为空，则默认的值为farthest-corner。

• 我们先来看看渐变中心离容器以边做为终止位置的代码及效果(容器大小为200*200)：

  //渐变中心距离容器最近的边作为终止位置，本例为30px
  background-image: radial-gradient(closest-side circle at 30px 60px, #69f, #fd44ff);
  //渐变中心距离容器最远的边作为终止位置，本例为200px-60px=140px
  background-image: radial-gradient(farthest-side circle at 30px 60px, #69f, #fd44ff);

示例图如下：

radial-side.png

• 渐变中心离容器以角做为终止位置的代码及效果(容器大小为200*200)：

  //渐变中心距离容器最近的角作为终止位置，本例为Math.sqrt(30*30+60*60)≈67px（勾股定理算出）
  background-image: radial-gradient(closest-side circle at 30px 60px, #69f, #fd44ff);
  //渐变中心距离容器最近的角作为终止位置，本例为Math.sqrt(30*30+60*60)≈220px（勾股定理算出）
  background-image: radial-gradient(farthest-side circle at 30px 60px, #69f, #fd44ff);

radial-corner.png

2. 第二个参数

第二个参数如同线性渐变，为颜色 & 位置，颜色可为多个，每个颜色可写2个位置的值。
例如：

background-image: radial-gradient(#69f 25%,#fd44ff 50%,#f64f59 75%, #fbd786);
background-image: radial-gradient(#69f 25%,#fd44ff 20% 50%,#f64f59 50% 75%, #fbd786 75%);

显示效果如下：

radial4.png

那么我们可以来画一道彩虹。

.rainbow{
    width: 400px;
    height: 200px;
    background-image: radial-gradient(at center bottom, transparent 20%,#cc419c 20% 25%,#4d81ee 25% 30%,#03dbda 30% 35%, #81e745 35% 40%,#f6fc5e 40% 45%, #fea805 45% 50%, #fe6859 50% 55%, transparent 55%);
}

效果如下：

radial-rainbow.png

地址：https://codepen.io/jianxiujiucan/pen/JjdPeGV

三、圆锥渐变

语法：

background-image: conic-gradient(from angle at position, start-color, ..., last-color )

• 第一个参数：
  from angle：起始的角度，可选，默认为从上到下
  position：圆锥锥点的位置
• 第二个参数：
  start-color：定义开始颜色
  stop-color：定义结束颜色

1.第一个参数

同样的，第一个参数可以为空，默认的角度为0deg，锥心为形状的 中心点。例如：

background-image: conic-gradient(#69f, #fd44ff); 

conic1.png

我们可以改变起始的角度，如：

background-image: conic-gradient(from -90deg, #69f, #fd44ff); 

conic2.png

改变锥心位置：

background-image: conic-gradient(from -90deg at 80px 120px, #69f, #fd44ff)

conic3.png

2. 第二个参数

与线性、径向渐变一样，可以设颜色及渐变的起始位置。位置接受的参数有百分比和角度。例如：

background-image: conic-gradient(#69f 10%, #fd44ff 10%);

以上代码等同于：

background-image: conic-gradient(#69f 36deg, #fd44ff 36deg);

显示效果如下：

conic4.png

3. 重复圆锥渐变

与线性、径向渐变一样，圆锥渐变也有重复的属性。

background-image: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);

效果如图：

conic5.png

这个效果图是不是有一点点熟悉的感觉呢？
我们来把它设置成圆形，加一个按钮，就是一个抽奖圆盘了。
效果如下：

lottery.png

地址：https://codepen.io/jianxiujiucan/pen/bGddbez

我们可以用圆锥做各式各样的loading效果：

conic-gif.gif
地址：https://codepen.io/jianxiujiucan/pen/bGdGyKN

第二个loading请自己研究一下并写练习哦~

我们可以用渐变来绘制各式各样的效果啦。
比如信：

letter.png

https://codepen.io/jianxiujiucan/pen/gOppOdP