实现方法非常简单,直接看代码吧

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
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #ABBAC3;
margin-bottom: 5px;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4D4D4D;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

.github-badge .bg-brightgreen {
background-color: #4DC820 !important;
}
.github-badge .bg-orange {
background-color: #FFA500 !important;
}
.github-badge .bg-blueviolet {
background: linear-gradient(to right, #3ca5f6, #a86af9) !important;
}
.github-badge .bg-lightgrey {
background-color: #9F9F9F !important;
}

1
2
3
4
<div class="github-badge"><span class="badge-subject">test1</span><span class="badge-value bg-brightgreen">ahzoo</span></div>  
<div class="github-badge"><span class="badge-subject">home-page</span><span class="badge-value bg-blueviolet"> ahzoo.cn </span></div>
<div class="github-badge"><span class="badge-subject"><i class="fa fa-home"></i> home-page</span><span class="badge-value bg-orange "> ahzoo.cn </span></div>
<div class="github-badge"><span class="badge-subject"><i class="fa fa-home"></i></span><span class="badge-value bg-lightgrey">ahzoo</span></div>

预览图: