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

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

radial-gradient()径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

一、使用方法

1
2
// html
<div class="box"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box{ 
    width:100px;
    height:100px;
    /* 线性渐变 */
    /* 从上到下 由黄色变为红色变为蓝色 */
    background:linear-gradient(yellow,red,blue);
    /* 渐变轴为45度，从蓝色渐变到红色 */
    background:linear-gradient(45deg, blue, red);
    /* 从右下到左上、从蓝色渐变到红色 */
    background:linear-gradient(to left top, blue, red);
    /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
    background:linear-gradient(0deg, blue, green 40%, red); }

    /* 径向渐变 */
    /* 中心红色 红色周围为黄色 周边为绿色  */
    background-image: radial-gradient(red, yellow, green)

二、不同浏览器的支持

1
2
3
4
5
6
7
8
9
10
11
<div class="box"></div>
// css
.box{ 
    <!-- chrome -->
    background: -webkit-linear-gradient(to right, red, green); 
    <!-- Opera -->
    background:-o-linear-gradient(to right,to right, red, green); 
    <!-- Firefox -->
    background:-moz-linear-gradient (to right, to right, red, green); 

    background:linear-gradient(to right, to right, red, green); }

三、语法

1
2
3
4
/* linear-gradient 线性渐变 */
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
/* radial-gradient 径向渐变*/
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

四、实际应用

如dashboard首页有四个盒子，每个盒子的背景渐变色是不同的，使用scss css预处理器的写法。

1、mixin.scss

1
2
3
4
5
6
7
/*  */
@mixin cardBg($leftColor, $rightColor) {
  background: -webkit-linear-gradient(to right, $leftColor, $rightColor);
  background: -o-linear-gradient(to right, $leftColor, $rightColor);
  background: -moz-linear-gradient (to right, $leftColor, $rightColor);
  background: linear-gradient(to right, $leftColor, $rightColor);
}

2、页面引入mixin.scss

下面的@include 是调用mixin的cardBg变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@import ''./mixin.scss

.cardList-wrapper{
    box-sizing:border-box;
    heitht:150px;
    padding:15px 15px 0;
    border-radius:6px;
    cursor:pointer;
    margin-bottom:25px;
    box-shadow:3px 5px 15px rgba(40,40,40,0.36);
    /* 第一个盒子 */
    &.card-item-one{
        @include cardBg(#5171fd,#c97afd);
        &:hover{
            box-shadow:0 5px 10px #c97afd;
        }
    }
    /* 第二个盒子 */
    &.card-item-two {
      @include cardBg(#3dadf6, #737bfc);
       &:hover {
        box-shadow: 0 5px 10px #737bfc;
      }
    }
    /* 第三个盒子 */
    &.card-item-three {
      @include cardBg(#ea677c, #ef9b5f);
       &:hover {
        box-shadow: 0 5px 10px #ef9b5f;
      }
    }
    /* 第四个盒子 */
    &.card-item-four {
      @include cardBg(#42d79b, #a6e25f);
       &:hover {
        box-shadow: 0 5px 10px #a6e25f;
      }
    }
    /* 四个盒子在hover时都会变大一些 */
    &:hover {
      transform: scale(1.03);
      transition: all 0.1s ease-out;
    }
}