这么用 CSS 生成漂亮的水平分隔线（horizontal rule）设计效果 - css 笔记

1
/* 渐变 color1 - color2 - color1 */
2

3
hr.style-one {
4
    border: 0;
5
    height: 1px;
6
    background: #333;
7
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
8
}
9

10
/* 透明渐变 - color - transparent */
11

12
hr.style-two {
13
    border: 0;
14
    height: 1px;
15
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
16
}
17

18
/* 双线 */
19

20
hr.style-three {
21
    border: 0;
22
    border-bottom: 1px dashed #ccc;
23
    background: #999;
24
}
25

26
/* 单线阴影 */
27

28
hr.style-four {
29
    height: 12px;
30
    border: 0;
31
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
32
}
33

34
/* 云朵状 */
35

36
hr.style-five {
37
    border: 0;
38
    height: 0; /* Firefox... */box-shadow: 0 0 10px 1px black;
39
}
40
hr.style-five:after {  /* Not really supposed to work, but does */content: "\00a0";  /* Prevent margin collapse */
41
}
42

43
/* 内嵌 */
44

45
hr.style-six {
46
    border: 0;
47
    height: 0;
48
    border-top: 1px solid rgba(0, 0, 0, 0.1);
49
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
50
}
51

52
/* 晕状 */
53

54
hr.style-seven {
55
    height: 30px;
56
    border-style: solid;
57
    border-color: black;
58
    border-width: 1px 0 0 0;
59
    border-radius: 20px;
60
}
61
hr.style-seven:before {
62
    display: block;
63
    content: "";
64
    height: 30px;
65
    margin-top: -31px;
66
    border-style: solid;
67
    border-color: black;
68
    border-width: 0 0 1px 0;
69
    border-radius: 20px;
70
}
71

72
/* 文字插入式 */
73

74
hr.style-eight {
75
    padding: 0;
76
    border: none;
77
    border-top: medium double #333;
78
    color: #333;
79
    text-align: center;
80
}
81
hr.style-eight:after {
82
    content: "gb";
83
    display: inline-block;
84
    position: relative;
85
    top: -0.7em;
86
    font-size: 1.5em;
87
    padding: 0 0.25em;
88
    background: white;
89
}
90

91
/* 分隔线统一样式 */
92
hr{
93
  margin: 40px 0;
94
}

1
<div class="personal-mybuluo-head">
2
      <div class="personal-mybuluo-wording">她的部落</div>
3
      <div class="personal-border jmu-border-1px border-bottom"></div>
4
    </div>
5

6
        <style type="text/css">
7
            .personal-mybuluo-head {
8
                height: 14px;
9
                position: relative;
10
            }
11
            .personal-mybuluo-wording {
12
                position: absolute;
13
                top: 0;
14
                z-index: 2;
15
                left: 50%;
16
                background-color: #fff;
17
                color: #777;
18
                text-align: center;
19
                -webkit-transform: translate(-50%,0);
20
                transform: translate(-50%,0);
21
                padding: 0 10px;
22
            }
23
            .personal-border {
24
                position: absolute;
25
                top: -7px;
26
                left: 0;
27
                width: 100%;
28
                height: 14px;
29
                z-index: 1;
30
            }
31
            .jmu-border-1px {
32
                position: relative;
33
            }
34
            .jmu-border-1px.border-bottom:after {
35
                border-bottom: 1px solid #dedfe0;
36
            }
37
            @media only screen and (-webkit-min-device-pixel-ratio: 2)
38
            .jmu-border-1px:after {
39
                right: -100%;
40
                bottom: -100%;
41
                -webkit-transform: scale(0.5);
42
            }
43
            .jmu-border-1px:after {
44
                display: block;
45
                content: '';
46
                position: absolute;
47
                top: 0;
48
                right: 0;
49
                bottom: 0;
50
                left: 0;
51
                -webkit-transform-origin: 0 0;
52
                -webkit-transform: scale(1);
53
                pointer-events: none;
54
            }
55

56
            </style>