css中可以进行背景的渐变，通常来说，我们使用的是下面两种渐变

• 线性渐变
• 径向渐变

线性渐变

先来看一下语法：

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops

解释一下：

• <angle> 角度值指定渐变的方向（或角度）。
• <side-or-corner> 渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right， 第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。
• <color-stop> 由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>

于是我们有了下面的效果：

这是一个从左到右的金色到粉色的线性渐变

background-image: linear-gradient(to right, gold, pink)

径向渐变

先来看下语法：

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

或者我们可以简化成下面这样：

radial-gradient(shape size position, color-stop[...,color-stop]);

解释一下：

• <position> 径向渐变的圆心位置
• <shape> 渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆
• <size> 渐变的尺寸大小
• <color-stop> 由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>

于是我们有了下面的效果：

这是一个红色到黑色的径向渐变

background-image: radial-gradient(red,black)

渐变的花式玩法

当然上面的渐变是非常简单的玩法，下面我们整点高难度的~

• 颜色突变

我们当前做的渐变是一个均匀的渐变，如果多个颜色具有相同的位置，那么这些颜色就会在一个无限小的过渡区域进行过渡，从视觉上看，颜色在该位置就会突然变化，而不是一个平滑的过渡效果。

就像这样

• 背景的多个属性配合

渐变可以当背景图去处理，既然是背景图，那么就可以进行叠加和平铺，于是我们得到了下面的效果：

这是两个渐变叠加配合背景图平铺实现的效果

background-image:
                linear-gradient(rgba(255,0,0,0.5) 50% ,transparent 50%), 
                linear-gradient(to right,rgba(255,0,0,0.5) 50% , #fff 50% );
background-size: 50px 50px;

我们也可以用重复线性渐变进行叠加操作：

background-image:
                repeating-linear-gradient(-45deg,
                    transparent,
                    transparent 25%,
                    tomato 0,
                    tomato 50%),
                repeating-linear-gradient(45deg,
                    transparent,
                    transparent 25%,
                    dodgerblue 0,
                    dodgerblue 50%), wheat;

background-size: 50px 50px;

再加上亿点细节~ （background-blend-mode: multiply; 正片叠底效果）

就是这个样子啦！Ta Da!

• 渐变色的文字！

-webkit-background-clip:text 这个属性可以将背景色裁剪到文字中，然后我们先这样再这样最后那样就得到一个很棒的渐变色的文字！

 color: transparent;
 background:
            repeating-linear-gradient(-45deg,
            transparent,
            transparent 25%,
            tomato 0,
            tomato 50%),
            repeating-linear-gradient(45deg,
            transparent,
            transparent 25%,
            dodgerblue 0,
            dodgerblue 50%), wheat;
background-size: 50px 50px;
background-blend-mode: multiply;
-webkit-background-clip: text;

• 渐变的边框

利用border-image-source 属性可以把渐变放在边框中，像这样：

border: 20px solid;
border-image-source: 
			repeating-linear-gradient(-45deg, 
			cyan 0, 
			cyan 15px,
			transparent 15px,
                        transparent 30px,
                        tomato 30px,
                        tomato 45px,
                        transparent 45px,
                        transparent 60px);

border-image-slice: 20;