CCS3实现渐变色之linear-gradient的使用linear-gradient 什么是 linear-gradi

linear-gradient

什么是 linear-gradient ？

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片
如何使用？

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变

CSS语法：
```
linear-gradient(direction, color-stop1, color-stop2, ...);
```

背景色渐变

通过 background-image 属性来实现背景色渐变

/* 从上到下，蓝色渐变到红色 */
background-image: linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */
background-image: linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
background-image: linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background-image: linear-gradient(0deg, blue, green 40%, red);

边框渐变

通过 border-image 属性来实现边框渐变

<div class="content"></div>

.content {
  width: 100px;
  height: 100px;
  border: 10px solid #ccc;
  border-image: -webkit-linear-gradient(red, blue) 30 30;
  border-image: -moz-linear-gradient(red, blue) 30 30;
  border-image: linear-gradient(red, blue) 30 30;
}

上图可以看出 border-image 无法实现圆角，怎么办？使用父元素的 padding 来模拟边框，设置父元素的背景色渐变即可

<div class="father">
    <div class="son">
    </div>
</div>

.father {
    width: 100px;
    height: 100px;
    padding: 10px; // 父元素的padding值等于渐变色边框的border-width值
    border-radius: 5px;
    background-image: -webkit-linear-gradient(-45deg, rgba(88, 130, 193, 0.21), rgba(88, 130, 193, 0.49));
    background-image: -moz-linear-gradient(-45deg, rgba(88, 130, 193, 0.21), rgba(88, 130, 193, 0.49));
    background-image: linear-gradient(-45deg, rgba(88, 130, 193, 0.21), rgba(88, 130, 193, 0.49));
}

.son {
    height: 100%;
    border-radius: 5px;
    background: #fff;
}

字体图标渐变

首先肯定是要先引入字体图标，~~参考《项目快速引入iconfont的四种方式》~~
通过 background、-webkit-background-clip、 color 属性来实现字体图标渐变
- background 属性设置背景色渐变（一定要写在 background-clip 属性的前面）
- -webkit-background-clip 属性规定绘制区域为文字部分（text）
- color 属性设置文字填充色为透明色（transparent）

<i class="iconfont left-icon"></i>

i {
    font-size: 16px;
    font-style:normal;
}
.left-icon {
    /* linear 表示线性、0 0 表示开始位置的x与y的位置，0 100%表示结束的x与y位置，from(#000)表示从当前颜色黑色，to(#FFF)表示渐变到这个颜色白色 */
    background: -webkit-gradient(linear, 0, 0, 0, 100%, from(#7E73FF), to(#5B4DFF));
    /* 坐标当然也可以用top、right、bottom、left来表示 */
    background: -webkit-gradient(linear, left top, left bottom, from(#7E73FF), to(#5B4DFF));
    /* 上面也可以缩写 */
    background: linear-gradient(180deg, #7E73FF 0%, #5B4DFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

如果把 background 属性放在 background-clip 属性后面，则会导致 background-clip 属性失效这是因为 background 属性是包括 background-clip 属性在内的背景属性的简写方式，而且 css 是从上往下解析的，所以后面的属性会复写前面的属性。

推荐写法

background属性写在background-clip前面

/* background属性写在background-clip前面 */
.left-icon {
    background: linear-gradient(180deg, #7E73FF 0%, #5B4DFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

合并简写

.left-icon {
    background: linear-gradient(180deg, #7E73FF 0%, #5B4DFF 100%) text;
}

全部拆开单独写

.left-icon {
    background-clip: text;
    background-image: linear-gradient(180deg, #7E73FF 0%, #5B4DFF 100%);
}