CSS-Secret/patterns.html at master · Tan12/CSS-Secret · GitHub

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>patterns</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            height: 500px;
            margin: 30px auto;
        }
        p{
            text-align: center;
        }
        .grid-1{
            background: white;
            background-image: linear-gradient(90deg,
                                  rgba(200,0,0,.5) 50%, transparent 0),
                              linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
            background-size: 30px 30px;
        }
        .grid-2{
            background: #58a;
            background-image: linear-gradient(90deg,white 1px, transparent 0),
                              linear-gradient(white 1px, transparent 0);
            background-size: 30px 30px;
        }
        .grid-3{
            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: 75px 75px, 75px 75px,
                             15px 15px, 15px 15px;
        }
        .polka-1{
            background: #655;
            background-image: radial-gradient(tan 30%, transparent 0);
            background-size: 30px 30px;
        }
        .polka-2{
            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;/*偏移定位置必须是贴片宽高的一半*/
        }
        .checkerboard{
            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-size: 30px 30px;
            background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
        }
        .checkerboard-improve{
            background: #eee;
            background-image: linear-gradient(45deg,
                                  rgba(0,0,0,.25) 25%, transparent 0,
                                  transparent 75%, rgba(0,0,0,.25) 0),
                              linear-gradient(45deg,
                                  rgba(0,0,0,.25) 25%, transparent 0,
                                  transparent 75%, rgba(0,0,0,.25) 0);
            background-size: 30px 30px;
            background-position: 0 0, 15px 15px;
        }
    </style>
</head>
<body>
    <!--CSS3图案库：lea.verou.me/css3patterns-->
    <!--CSS3图案的SVG版实现：philbit.com/svgpatterns-->
    <div class="grid-1"></div>
    <p>网格-1</p>
    <div class="grid-2"></div>
    <p>网格-2</p>
    <div class="grid-3"></div>
    <p>网格-3</p>
    <div class="polka-1"></div>
    <p>波点-1</p>
    <div class="polka-2"></div>
    <p>波点-2</p>
    <div class="checkerboard"></div>
    <p>棋盘</p>
    <div class="checkerboard-improve"></div>
    <p>棋盘改进版</p>
</body>
</html>