linear-gradient
CSS方法 linear-gradient 创建一个有渐变效果的图片，所以它一般被作为 background-image/border-image/… 属性的值
函数参数
- 参数1：表示颜色延申的方向
- to right ：向右延申
- to bottom ：向下延申
- to left ：向左延申
- to top ：向上延申
- to right bottom ：向右下方延申
- 180deg ：用角度表示延申方向
- 后续参数：表示颜色及其配置
- blue ：只写颜色
- blue 30% ：颜色和该颜色停止的地方，第一个和最后一个颜色会默认向前后延申到0%和100%
方向条纹
横向条纹
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 100vh;
background-image: linear-gradient(to right, red, blue, green, yellow);
}
</style>
</head>
<body>
</body>
</html>
|
竖向条纹
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 100vh;
background-image: linear-gradient(to bottom, red, blue, green, yellow);
}
</style>
</head>
<body>
</body>
</html>
|
斜上方45°条纹
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 100vh;
background-image: linear-gradient(45deg, red, blue, green, yellow);
}
</style>
</head>
<body>
</body>
</html>
|
颜色和终止点
下面的案例中，红色在10%处停止，蓝色在20%处停止，绿色在30%处停止，而黄色也在30%处停止，但是因为最后一个颜色会默认延申到100%，所以绿色和黄色没有渐变过程，棱角分明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 100vh;
background-image: linear-gradient(to right, red 10%, blue 20%, green 30%, yellow 30%);
}
</style>
</head>
<body>
</body>
</html>
|
黑白条纹
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: gray;
}
div {
height: 12px;
background-image: linear-gradient(
to right,
black 60%,
white 60%
);
background-size: 50px 100%;
background-repeat: repeat-x;
transform: skew(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
conic-gradient
金属螺纹按钮效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 30px;
height: 30px;
border-radius: 50%;
background-image: conic-gradient(white,gray,white,gray,white,gray,white,gray,white,gray,white);
box-shadow: -2px -2px 0 0 gray;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
radial-gradient
等待后续补充
