（转载）css画三角形等各类图标

发表于 分类于
本文字数： 16k 阅读时长 ≈ 15 分钟

css3 的属性 transform(转换) 用途很广泛，功能也很强大，为了熟悉它的各种转换方式(平移 translate，旋转 rotate，扭曲 skew，放缩 scale)，我做了一些平常常用的一些简单的图标。

这些图标很多是通过三角形来拼贴起来的，所以我们需要知道怎么样画三角形。

  1. 我们要将该 div 的 width 和 height 都设置为 0，三角形是通过设置 border 来实现；
  2. 通过我们需要画成的三角形的目标分析，这个三角形的朝向(只针对规则的朝向：上、右、下、左、上左、上右、下右、下左，不规则的朝向可以通过旋转来实现)；
  3. 如果是上、右、下、左四种中的一种，将朝向的对面的 border-color 设置为我们需要的颜色，该朝向的这一边不设置 border，其它两边的 border-color 设置为 transparent；
  4. 如果是上左、上右、下右、下左中的一种，以上右为例，设置相关的两边：上和右的 border-color 设置成我们想要的颜色，其它两边的 border-width 设置成 transparent。
  5. border-width 的值就是底边长和高。

三角形

三角形1

1
2
3
4
5
6
7
.bottom {
  width: 0;
  height: 0;
  border-top: 2em solid #000;
  border-right: 1.8em solid transparent;
  border-left: 1.8em solid transparent;
}

三角形2

1
2
3
4
5
6
7
.bottomLeft {
  width: 0;
  height: 0;
  border-width: 2em 1em;
  border-style: solid;
  border-color: transparent transparent #000 #000;
}

三角形3

1
2
3
4
5
6
7
8
.bottomLeftRotate {
  width: 0;
  height: 0;
  border-width: 2em 1em;
  border-style: solid;
  border-color: transparent transparent #000 #000;
  transform: rotate(60deg);
}

向上

向上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.top {
  box-sizing: border-box;
  position: relative;
  width: 0;
  height: 0;
  border-right: 0.9em solid transparent;
  border-bottom: 0.9em solid #000;
  border-left: 0.9em solid transparent;
}
.top:after {
  content: ''; /*针对before,after必须加上*/
  position: absolute;
  left: 50%;
  top: 0.7em;
  margin-left: -0.45em; /*宽度的一半，结合 left: 50%; 使用*/
  width: 0.9em;
  height: 1.3em;
  background-color: #000;
}

向右

向右

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.right {
  box-sizing: border-box;
  position: relative;
  width: 1.3em;
  height: 0.9em;
  background-color: #000;
}
.right:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.1em;
  margin-top: -0.9em;
  width: 0;
  height: 0;
  border-top: 0.9em solid transparent;
  border-bottom: 0.9em solid transparent;
  border-left: 0.9em solid #000;
}

向下

向下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.bottom {
  box-sizing: border-box;
  position: relative;
  width: 0.9em;
  height: 1.3em;
  background-color: #000;
}
.bottom:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 1.1em;
  margin-left: -0.9em;
  width: 0;
  height: 0;
  border-right: 0.9em solid transparent;
  border-top: 0.9em solid #000;
  border-left: 0.9em solid transparent;
}

向左

向左

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.left {
  box-sizing: border-box;
  position: relative;
  width: 0;
  height: 0;
  border-top: 0.9em solid transparent;
  border-right: 0.9em solid #000;
  border-bottom: 0.9em solid transparent;
}
.left:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0; /*在绝对定位中，top: 0; bottom: 0; margin: auto; 结合使用能竖直居中*/
  left: 0.7em;
  margin: auto;
  width: 1.3em;
  height: 0.9em;
  background-color: #000;
}

正确

正确

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.true {
  position: relative;
  width: 1.2em;
  height: 0.3em;
  background-color: #000;
  transform: rotate(60deg);
  transform-origin: right center;
  border-radius: 0.15em;
}
.true:after {
  content: '';
  position: absolute;
  top: 0.1em;
  left: -0.85em;
  width: 2em;
  height: 0.3em;
  background-color: #000;
  transform: rotate(60deg);
  transform-origin: right center;
  border-radius: 0.15em;
}

错误

错误

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.false {
  position: relative;
  width: 2em;
  height: 0.3em;
  background-color: #000;
  transform: rotate(45deg);
  border-radius: 0.15em;
}
.false:after {
  content: '';
  position: absolute;
  width: 2em;
  height: 0.3em;
  background-color: #000;
  transform: rotate(90deg);
  border-radius: 0.15em;
}

菜单

菜单

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
.menu {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 2em;
  background-color: #000;
  border-radius: 0.3em;
}
.menu:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1.2em;
  height: 0.15em;
  background-color: #fff;
}
.menu:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1.2em;
  height: 0.9em;
  border-width: 0.15em;
  border-style: solid none;
  border-color: #fff;
}

菜单 2

菜单 2

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
.menu2 {
  box-sizing: border-box;
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: #000;
  border-radius: 50%;
  cursor: pointer;
}
.menu2:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  left: -0.75em;
  width: 0.5em;
  height: 0.5em;
  background-color: #000;
  border-radius: 50%;
}
.menu2:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  left: 0.75em;
  width: 0.5em;
  height: 0.5em;
  background-color: #000;
  border-radius: 50%;
}

下载

下载

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
.download {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 0.8em;
  border-width: 0.3em;
  border-style: none solid solid;
  border-color: #000;
}
.download:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0.7em;
  left: 0;
  margin: auto;
  width: 0.3em;
  height: 1em;
  background-color: #000;
}
.download:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0.2em;
  left: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-right: 0.6em solid transparent;
  border-top: 0.6em solid #000;
  border-left: 0.6em solid transparent;
}

上传

上传

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
.upload {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 0.8em;
  border-width: 0.3em;
  border-style: none solid solid;
  border-color: #000;
}
.upload:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0.2em;
  left: 0;
  margin: auto;
  width: 0.3em;
  height: 1em;
  background-color: #000;
}
.upload:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 1.1em;
  left: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-right: 0.6em solid transparent;
  border-bottom: 0.6em solid #000;
  border-left: 0.6em solid transparent;
}

视频

视频

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.video {
  box-sizing: border-box;
  position: relative;
  width: 1.5em;
  height: 1.2em;
  background-color: #000;
  border-radius: 0.3em;
}
.video:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.4em;
  margin-top: -0.7em;
  width: 0;
  height: 0;
  border-top: 0.7em solid transparent;
  border-right: 0.6em solid #000;
  border-bottom: 0.7em solid transparent;
}

语音

语音

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
.voice {
  box-sizing: border-box;
  position: relative;
  width: 1.4em;
  height: 1em;
  border-width: 0.2em;
  border-style: none none solid;
  border-color: #000;
  border-radius: 50%;
}
.voice:before {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0.05em;
  margin: auto;
  width: 0.8em;
  height: 1.3em;
  background-color: #000;
  border-radius: 0.4em;
}
.voice:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.6em;
  left: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-right: 0.6em solid transparent;
  border-bottom: 0.4em solid #000;
  border-left: 0.6em solid transparent;
}

播放

播放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.play {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 2em;
  border: 0.2em solid #000;
  border-radius: 50%;
}
.play:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: -0.3em; /*没有让其左右居中，因为看起来右边更空一些*/
  width: 0;
  height: 0;
  border-top: 0.6em solid transparent;
  border-bottom: 0.6em solid transparent;
  border-left: 0.9em solid #000;
}

暂停

暂停

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
.pause {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 2em;
  border: 0.2em solid #000;
  border-radius: 50%;
}
.pause:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: -0.35em;
  width: 0.2em;
  height: 0.9em;
  background-color: #000;
}
.pause:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0.15em;
  width: 0.2em;
  height: 0.9em;
  background-color: #000;
}

上一首(集)

上一首(集)

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
.previous {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 2em;
  border: 0.2em solid #000;
  border-radius: 50%;
}
.previous:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: -0.65em;
  width: 0;
  height: 0;
  border-top: 0.45em solid transparent;
  border-bottom: 0.45em solid transparent;
  border-right: 0.6em solid #000;
}
.previous:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: -0.2em;
  width: 0;
  height: 0;
  border-top: 0.45em solid transparent;
  border-bottom: 0.45em solid transparent;
  border-right: 0.6em solid #000;
}

下一首(集)

下一首(集)

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
.next {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 2em;
  border: 0.2em solid #000;
  border-radius: 50%;
}
.next:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: -0.4em;
  width: 0;
  height: 0;
  border-top: 0.45em solid transparent;
  border-bottom: 0.45em solid transparent;
  border-left: 0.6em solid #000;
}
.next:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0.05em;
  width: 0;
  height: 0;
  border-top: 0.45em solid transparent;
  border-bottom: 0.45em solid transparent;
  border-left: 0.6em solid #000;
}

停止

停止

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.stop {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 2em;
  border: 0.2em solid #000;
  border-radius: 50%;
}
.stop:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0.9em;
  height: 0.9em;
  background-color: #000;
}

当前位置

当前位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.position {
  position: relative;
  width: 0.6em;
  height: 0.6em;
  border: 0.4em solid #000;
  border-radius: 50%;
}
.position:after {
  content: '';
  position: absolute;
  top: 0.55em;
  left: -0.4em;
  width: 0;
  height: 0;
  border-top: 1em solid #000;
  border-right: 0.7em solid transparent;
  border-left: 0.7em solid transparent;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

pc

pc

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
.pc {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 1.4em;
  border-width: 0.2em 0.2em 0.3em;
  border-style: solid;
  border-color: #000;
  border-radius: 0.2em;
  background-color: #efefef;
}
.pc:before {
  content: '';
  position: absolute;
  top: 1.2em;
  right: 0;
  left: 0;
  margin: auto;
  width: 0.6em;
  height: 0.4em;
  background-color: #000;
}
.pc:after {
  content: '';
  position: absolute;
  top: 1.6em;
  right: 0;
  left: 0;
  margin: auto;
  width: 1.6em;
  height: 0.2em;
  background-color: #000;
}

phone

phone

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.phone {
  box-sizing: border-box;
  position: relative;
  width: 1.4em;
  height: 2em;
  background-color: #efefef;
  border-width: 0.3em 0.2em 0.5em;
  border-style: solid;
  border-color: #000;
  border-radius: 0.15em;
}
.phone:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.4em;
  left: 0;
  margin: auto;
  width: 0.5em;
  height: 0.3em;
  background-color: #fff;
  border-radius: 0.3em;
}

搜索

搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.search {
  box-sizing: border-box;
  position: relative;
  width: 1em;
  height: 0.3em;
  background-color: #000;
  border-top-right-radius: 0.15em;
  border-bottom-right-radius: 0.15em;
  transform: rotate(40deg);
  transform-origin: right center;
}
.search:before {
  content: '';
  position: absolute;
  left: -1.3em;
  bottom: -0.6em;
  width: 1em;
  height: 1em;
  border: 0.3em solid #000;
  border-radius: 50%;
}

五角星

五角星

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
.star {
  box-sizing: border-box;
  position: relative;
  width: 0;
  height: 0;
  border-top: 0.7em solid #000;
  border-right: 1em solid transparent;
  border-left: 1em solid transparent;
}
.star:before {
  content: '';
  position: absolute;
  top: -0.7em;
  left: -1em;
  width: 0;
  height: 0;
  border-top: 0.7em solid #000;
  border-right: 1em solid transparent;
  border-left: 1em solid transparent;
  transform: rotate(72deg);
}
.star:after {
  content: '';
  position: absolute;
  top: -0.7em;
  left: -1em;
  width: 0;
  height: 0;
  border-top: 0.7em solid #000;
  border-right: 1em solid transparent;
  border-left: 1em solid transparent;
  transform: rotate(-72deg);
}

电子邮件

电子邮件

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
.email {
  box-sizing: border-box;
  position: relative;
  width: 0;
  height: 0;
  border-width: 0.7em 1em;
  border-style: solid;
  border-color: transparent transparent #000 #000;
}
.email:before {
  content: '';
  position: absolute;
  top: -0.7em;
  left: 1em;
  transform: rotateY(180deg);
  transform-origin: left center;
  width: 0;
  height: 0;
  border-width: 0.7em 1em;
  border-style: solid;
  border-color: transparent transparent #000 #000;
}
.email:after {
  content: '';
  position: absolute;
  top: -0.7em;
  left: 50%;
  margin-left: -0.9em;
  width: 0;
  height: 0;
  border-top: 0.6em solid #000;
  border-right: 0.9em solid transparent;
  border-left: 0.9em solid transparent;
}

眼睛

眼睛

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
.eye {
  box-sizing: border-box;
  position: relative;
  width: 2em;
  height: 1.2em;
  background-color: #000;
  border-radius: 50%;
}
.eye:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0.8em;
  height: 0.8em;
  background-color: #fff;
  border-radius: 50%;
}
.eye:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0.4em;
  height: 0.4em;
  background-color: #000;
  border-radius: 50%;
}

未锁

未锁

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
.unlock {
  box-sizing: border-box;
  position: relative;
  width: 1.6em;
  height: 1.4em;
  background-color: #000;
  border-radius: 0.2em;
}
.unlock:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -0.4em;
  right: -0.4em;
  width: 1em;
  height: 0.6em;
  border-width: 0.2em;
  border-style: solid solid none;
  border-color: #000;
  border-radius: 0.5em;
}
.unlock:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  bottom: 0.2em;
  left: 50%;
  margin-left: -0.15em;
  width: 0.3em;
  height: 0.5em;
  border-top-left-radius: 0.25em;
  border-top-right-radius: 0.25em;
  background-color: #fff;
}

杯子

杯子

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
.cup {
  box-sizing: border-box;
  position: relative;
  width: 1.3em;
  height: 2em;
  border-width: 0.2em 0.2em 1.2em;
  border-style: solid;
  border-color: #000;
  background-color: #efefef;
  border-bottom-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}
.cup:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: 0.1em;
  left: -0.7em;
  width: 0.7em;
  height: 1.4em;
  border-width: 0.2em;
  border-style: solid;
  border-color: #000;
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
}

心

心

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.heart {
  position: relative;
  width: 1.4em;
  height: 2em;
  background-color: #000;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  transform: rotate(-45deg);
  transform-origin: center bottom;
}
.heart:after {
  content: '';
  position: absolute;
  top: -0.7em;
  left: -0.7em;
  width: 1.4em;
  height: 2em;
  background-color: #000;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  transform: rotate(90deg);
  transform-origin: center bottom;
}

主页

主页

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
.home {
  box-sizing: border-box;
  position: relative;
  width: 1.4em;
  height: 1em;
  background-color: #000;
}
.home:before {
  content: '';
  position: absolute;
  top: -0.7em;
  left: 50%;
  margin-left: -1em;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-bottom: 0.8em solid #000;
}
.home:after {
  z-index: 2;
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0.3em;
  height: 0.5em;
  background-color: #fff;
}

密码

密码

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
.password {
  box-sizing: border-box;
  position: relative;
  width: 1.8em;
  height: 1.4em;
  background-color: #000;
  border-radius: 0.2em;
}
.password:before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -0.6em;
  left: 50%;
  margin-left: -0.5em;
  width: 1em;
  height: 1em;
  border: 0.2em solid #000;
  border-radius: 50%;
}
.password:after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  bottom: 0.2em;
  left: 50%;
  margin-left: -0.15em;
  width: 0.3em;
  height: 0.5em;
  border-top-left-radius: 0.25em;
  border-top-right-radius: 0.25em;
  background-color: #fff;
}

用户(账号)

用户(账号)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.user {
  box-sizing: border-box;
  position: relative;
  width: 0.9em;
  height: 0.9em;
  background-color: #000;
  border-radius: 50%;
}
.user:after {
  content: '';
  position: absolute;
  top: 1em;
  left: 50%;
  margin-left: -0.9em;
  width: 1.8em;
  height: 1em;
  background-color: #000;
  border-top-left-radius: 0.9em;
  border-top-right-radius: 0.9em;
}

菜单 3

菜单 3

1
2
3
4
5
6
7
8
9
10
11
12
13
#menu {
  color: #000;
  display: block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border-top: 10px solid; /*没有设置颜色值，将同文本颜色一样*/
  border-bottom: 10px solid;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: currentColor; /*颜色关键字，将同文本颜色一致*/
  background-clip: content-box; /*背景将绘制在内容方框内*/
}