渐变

什么是渐变

CSS渐变是CSS3的Image模块中新增的内容。利用CSS渐变替代在HTML页面中引入渐变效果的图片，这样减少HTML页面加载的时间，减小带宽的占用。
由于CSS渐变是由浏览器直接生成，在HTML页面缩放时的效果要比图片更好，使得可以更灵活、便捷地调整HTML页面布局。

线性渐变

线性渐变由一个轴(基准线)定义的，并且轴上每个点都具有独立的颜色。lincar-gradient()函数构建垂直于基准线的渐变效果,渐变的颜色取决于与之垂直相交的基准线上的色点。

基准线由包含渐变效果容器元素的中心点和一个角度来定义的。基准线上的颜色值则由不同的点来定义，包括起始点、终止点以及两者之间可选的中间点(中间点可以有多个)

起始点是基准线和容器元素的顶点与基准线垂直线的相交点来定义。

终止点是基准线和容器元素最近顶点与基准线垂直线的相交点来定义。

渐变的0度是从下到上的，增加角度会使渐变顺时针旋转。

CSS linear gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。具体语法结构如下:
linear-gradient(<angle> | <S ide-or-corner>, <color-stop>, <color-stop> +)
上述语法的参数说明:

  • 第一个参数用于定义线性渐变的方向，并且定义渐变颜色的终止位置。
    • angle:通过角度来定义渐变的方向。0度表示渐变方向从下向上，90度表示渐变从左向右。其角度按照顺时针方向增加。
    • side- or corner:通过关键字定义渐变的方向。具有两个关键字，一个表示水平位置(left或right)，一个表示垂直位置(top或bottom) 。关键字的先后顺序无影响，并且都是可选的。
  • 第二个参数、第三个参数用于定义渐变颜色的起始点和终止点。

代码

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        div{
            position: absolute;
            top: 10px;
            width: 200px;
            height: 200px;
            border: 1px solid gray;
        }
        /* 第一个基本渐变 */
        .box1{
            left: 10px;
            /* 
                第一个参数：设置渐变的方向
                第二个参数。第三个参数···设置渐变的颜色

             */
            background: linear-gradient(0,blue,red);
        }
        /* 第二个基本渐变 */
        .box2{
            left: 220px;
            background: linear-gradient(45deg,blue,red);
        }
        /* 第三个基本渐变 */
        .box3{
            left: 430px;
            background: linear-gradient(90deg,blue,red);
        }
        .box4{
            left: 640px;
            background: linear-gradient(90deg,blue,red,yellow);
        }
        /* 使用rgba设置 */
        .box5{
            left: 850px;
            background: linear-gradient(90deg,rgba(255,255,255,0),red,yellow);
        }
        .box6{
            left: 1060px;
            background: linear-gradient(90deg,rgba(255,255,255,0),red);
        }
        /* 关键字设置角度 */
        .box7{
            top: 220px;
            left: 10px;
            background: linear-gradient(to left,blue,red);
        }
        .box8{
            top: 220px;
            left: 220px;
            background: linear-gradient(to left bottom,blue,red);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</body>
</html>

渐变兼容性问题(新的语法，因为老语法已废弃)：

1
2
3
4
5
6
.box8{
    -webkit-background: linear-gradient(to left bottom,blue,red);
    -moz-background: linear-gradient(to left bottom,blue,red);
    -ms-background: linear-gradient(to left bottom,blue,red);
    -o-background: linear-gradient(to left bottom,blue,red);
}

头像滤镜效果

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .box1{
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
        img{
            width: 200px;
            float: left;
            border-radius: 50%;
        }
        .lvjing{
            position: relative;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right,rgba(255,154,158,.7),rgba(250,208,196,.7));
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box1">
        <img src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/02/24/20200224111924.jpg" alt="">
        <div class="lvjing"></div>
    </div>
</body>
</html>

径向渐变

径向渐变由其中心点、边缘形状轮廓、位置以及颜色结束点定义的。

  • 径向渐变的中心点至边缘形状以及其延伸的部分是由连续缩放的若干同心轮廓组成的。
  • 颜色结束点用于设定虚拟渐变射线的变化方式，由中心点水平变化至右侧。颜色结束点由百分比设定，中心点为0%，終止点为100%。终止点为渐变射线与边缘形状相交点的渐变半径。
  • 边缘形状只能是圆形或者椭圆形。

语法radial-gradient(shape at position,clor-stop,color-stop+)

  • shape:表示设置的渐变形状,默认表示椭圆
  • position:表示设置起点的坐标值
    • 第一个值: 表示水平方向的值
    • 第二个值: 表示垂直方向的值
  • size: 表示设置渐变形状的大小
    • 圆形
      • 该值为原型的半径
    • 椭圆形
      • 值为段半径和长半径
  • color-stop:表示渐变的颜色,可以多个
    • 其后也可跟位置 例如 #212121 50% 50%

代码

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        div {
            position: absolute;
            top: 10px;
            width: 400px;
            height: 200px;
            border: 1px solid gray;
        }
        .box1 {
            left: 10px;
            /* 
            
             */
            background: radial-gradient(blue,red);
        }
        /* 形状为圆形 */
        .box2 {
            left: 420px;
            background: radial-gradient(circle,blue,red);
        }
        .box3 {
            left: 830px;
            background: radial-gradient(ellipse,blue,red);
        }
        .box4{
            top: 220px;
            left: 10px;
            background: radial-gradient(ellipse at 0%,blue,red);
        }
        .box5{
            top: 220px;
            left: 420px;
            background: radial-gradient(ellipse at 50%,blue,red);
        }
        .box6{
            top: 220px;
            left: 830px;
            background: radial-gradient(ellipse at 100%,blue,red);
        }
        .box7{
            top: 430px;
            left: 10px;
            background: radial-gradient(ellipse at 50% 0%,blue,red);
        }
        .box8{
            top: 430px;
            left: 420px;
            background: radial-gradient(circle 215px at 50%,blue,red);
        }
        .box9{
            top: 830px;
            left: 420px;
            background: radial-gradient(ellipse 200px at 100%,blue,red);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</body>

</html>

小球案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid gray;
            background: radial-gradient(circle at 25% 25%,#DFFFDF,#00DB00,#28ff28);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

重复渐变

repeating-linear-gradient() 函数和 repeating-radial-gradient() 函数来实现重复的渐变效果.

重复线性渐变

repeating-linear-gradient(<angle> | <side-or-corner>, <color-stop>, <color-stop> +)

  • 第一个参数用于定义线性渐变的方向，并且定义渐变颜色的终止位置。

    • auangle：通过角度来定义渐变的方向。0度表示渐变方向从下向上，90度表示渐变从左向右。其角度按照顺时针方向增加。

      • side-or-corner：通过关键字定义渐变的方向。具有两个关键字，一个表示水平位置（left或right），一个表示垂直位置（top或bottom）。关键字的先后顺序无影响，并且都是可选的。

  • 第二个参数、第三个参数用于定义渐变颜色的起始点和终止点。

1
2
3
4
/* 一个由下至上的重复线性渐变,
   从蓝色开始，40%后变绿，
   最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);

重复渐变须在颜色后边设置起始位置，否则与线性渐变相同。

重复径向渐变

repeating-radial-gradient([ [ <shape> ] || <extent-keyword> ] [ at <position> ]?)

上述语法的参数说明：

  • shape：用于定义径向渐变的形状，包含circle（圆形）和ellipse（椭圆形）。

  • extent-keyword：用于定义径向渐变的边缘形状的位置。

  • position：用于定义径向渐变的中心点位置。

  • color-stop：用于定义径向渐变的颜色终止点。

与重复线性渐变相似，需加上位置。也就是颜色后加上结束位置。

1
2
3
4
/* 一个由下至上的重复线性渐变,
   从蓝色开始，40%后变绿，
   最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);

利用重复渐变实现唱片效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>重复径向渐变实现唱片效果</title>
    <style>
        .radial-gradient {
            position: relative;
            width: 262px; 
            height: 262px;
            border-radius: 50%;
            background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
            background-size: 50% 100%, 100% 50%, 100% 100%;
        }
        .radial-gradient::after {
            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -35px;
            border: solid 1px #d9a388;
            width: 68px; height: 68px;
            border-radius: 50%;
            box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
            background: #b5ac9a;
            content: '';
        }
    </style>
</head>
<body>
    <div class="radial-gradient"></div>
</body>
</html>