-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path7-复杂的背景图案.html
59 lines (58 loc) · 2.15 KB
/
7-复杂的背景图案.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
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
<!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>
.grid {
width: 200px;
height: 200px;
background-color: rgb(226, 213, 213);
background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
/* background-image: linear-gradient(white 1px, transparent 0),linear-gradient(90deg,white 1px,transparent 0); */
background-size: 30px 30px;
}
.blue-grid {
width: 400px;
height: 400px;
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
}
.wave-point {
width: 200px;
height: 100px;
background: #655;
background-image: radial-gradient(tan 30%, transparent 0),radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
.chessboard {
width: 200px;
height: 200px;
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px,
15px 15px, 30px 30px;
background-size: 30px 30px;
}
</style>
</head>
<!-- 红色格纹 -->
<div class="grid"></div>
<hr>
<!-- 蓝色格纹 -->
<div class="blue-grid"></div>
<hr>
<!-- 波点 -->
<div class="wave-point"></div>
<hr>
<!--棋盘 -->
<div class="chessboard"></div>
</body>
</html>