CSS-巧用多重渐变

线性渐变 (linear-gradient)：

1
2
3
4
5
6
7
8
9
10
11
/* 从上到下渐变，从红色到蓝色 */
background-image: linear-gradient(red, blue);

/* 从左到右渐变，从绿色到黄色 */
background-image: linear-gradient(to right, green, yellow);

/* 45度角渐变，从青色到紫色 */
background-image: linear-gradient(45deg, cyan, purple);

/* 指定颜色停止点的具体位置 */
background-image: linear-gradient(to bottom, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

效果如下:

径向渐变 (radial-gradient)

1
2
3
4
5
6
7
8
/* 从中心点向外辐射，从红色到白色 */
background-image: radial-gradient(circle, red, white);

/* 椭圆形渐变，从中心点向外辐射，从黄色到蓝色 */
background-image: radial-gradient(ellipse, yellow, blue);

/* 指定大小和位置 */
background-image: radial-gradient(circle 100px at 0 0, red, yellow);

效果如下：

多重渐变

注意要点：

  • background-image 属性是可以接受多个渐变值，多个渐变之间使用,隔开
  • 支持线性渐变和径向渐变互相叠加
  • 前面的渐变会盖住后面的渐变
  • 渐变的位置、大小均可自行设置
1
2
3
4
5
6
background-image:
    linear-gradient(to right, #919191, transparent),
    radial-gradient(ellipse, yellow, blue);
background-position: 0 0, center; /* 控制每个背景图像的位置 */
background-repeat: no-repeat; /* 渐变不重复 */
background-size: 100% 100%, 50% 50%; /* 控制每个背景图像的大小 */

效果如下：

进阶

现在我们来观察下如下动图，思考一下我们是否可以使用纯CSS完成呢？

先添加一个div元素，并设置宽高及背景颜色：

1
<div class="Block"></div>
1
2
3
4
5
.Block{
      width: 10rem;
      height: 10rem;
      background-color: #d7d7d79c;
}

现在它长这样：

现在我们添加一个背景渐变：

1
2
3
4
5
.Block{
      ...
      background-image: 
        linear-gradient(to right, #00b095 0%, #00b095 10px, #ff000059 10px, #ff000059 calc(100% - 10px), #00b095 0);
}

变成了这样，渐变盖在了背景颜色之上：

解释一下这里的渐变用法，这是渐变的一种不渐变用法，通过设置相同的渐变颜色并指定渐变进度，可以实现类似色块排列的效果，这里就是指定：

  • 从0%到10px是#00b095
  • 从10px到calc(100% - 10px)是#ff000059
  • 从calc(100% - 10px)到100%是#00b095

然后设置渐变大小:

1
2
3
4
5
.Block{
      ...
      background-repeat: no-repeat;
      background-size: 100% 2px; /* 设置渐变高度为2px */
}

因为渐变是可以叠加的，所以我们按照这个思路再添加一个渐变：

1
2
3
4
5
6
7
8
.Block{
      ...
      background-image: 
        linear-gradient(to right, #00b095 0%, #00b095 10px, #ff000059 10px, #ff000059 calc(100% - 10px), #00b095 0),
        linear-gradient(to bottom, #00b095 0%, #00b095 10px, #ff000059 10px, #ff000059 calc(100% - 10px), #00b095 0)
        ; /* 注意第二个渐变的方向是: to bottom */
      background-size: 100% 2px, 2px 100%; /* 同时设置第二个渐变宽度为2px */
}

好的，这里已经初见端倪了，我们再按照这个思路再添加两个渐变（复制前面两个也行），并通过设置渐变位置覆盖四条边界：

1
2
3
4
5
6
7
8
9
10
11
.Block{
      ...
      background-image: 
        linear-gradient(to right, #00b095 0%, #00b095 10px, #ff000059 10px, #ff000059 calc(100% - 10px), #00b095 0),
        linear-gradient(to bottom, #00b095 0%, #00b095 10px, #ff000059 10px, #ff000059 calc(100% - 10px), #00b095 0),
        linear-gradient(to right, #00b095 0%, #00b095 10px, #ff000059 10px, #ff000059 calc(100% - 10px), #00b095 0),
        linear-gradient(to bottom, #00b095 0%, #00b095 10px, #ff000059 10px, #ff000059 calc(100% - 10px), #00b095 0)
        ;
      background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
      background-position: 0 0, 100% 0, 0 100%, 0 100%;
}

最后使用transparent替换渐变中的#ff000059颜色，并去掉.Block元素的背景颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
.Block{
      width: 10rem;
      height: 10rem;
      background-repeat: no-repeat;
      background-image: 
        linear-gradient(to right, #00b095 0%, #00b095 10px, transparent 10px, transparent calc(100% - 10px), #00b095 0),
        linear-gradient(to bottom, #00b095 0%, #00b095 10px, transparent 10px, transparent calc(100% - 10px), #00b095 0),
        linear-gradient(to right, #00b095 0%, #00b095 10px, transparent 10px, transparent calc(100% - 10px), #00b095 0),
        linear-gradient(to bottom, #00b095 0%, #00b095 10px, transparent 10px, transparent calc(100% - 10px), #00b095 0)
        ;
      background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
      background-position: 0 0, 100% 0, 0 100%, 0 100%;
    }

这样一个纯css制作的四角效果就做好了，需要最终实现效果图那样的鼠标滑过动画，只需要在.Block元素下添加一个before伪元素，并将实现的四角渐变应用过去，同时添加:hover样式以改变大小就可以了，终于代码如下（根据需要替换#00b095颜色）：

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
.Block{
      width: 10rem;
      height: 10rem;
      background-color: #d7d7d79c;
      text-align: center;
      line-height: 10rem;
      position: relative;
}
.Block::before{
      content: '';
      display: block;
      position: absolute;
      inset: 0;
      transition: all 0.5s;
      background-repeat: no-repeat;
      background-image: 
        linear-gradient(to right, #00b095 0%, #00b095 10px, transparent 10px, transparent calc(100% - 10px), #00b095 0),
        linear-gradient(to right, #00b095 0%, #00b095 10px, transparent 10px, transparent calc(100% - 10px), #00b095 0),
        linear-gradient(to bottom, #00b095 0%, #00b095 10px, transparent 10px, transparent calc(100% - 10px), #00b095 0),
        linear-gradient(to bottom, #00b095 0%, #00b095 10px, transparent 10px, transparent calc(100% - 10px), #00b095 0);
      background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
      background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.Block:hover::before{
      inset: -10px;
}

预览链接：👆