none

0%

CSS实现各种样式

发表于 更新于

实现+号

HTML

1
2
<div class="add">
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.add {
  position: relative;
  width: 80px;
  height: 80px;
}

.add:after {
  height: 100%;
  border-left: 20px solid #666;
  margin-left: 30px
}

.add:before {
  width: 100%;
  border-top: 20px solid #666;
  margin-top: 30px
}

.add:after,
  .add:before {
  content:"";
  position: absolute;
}

输出

三条线

HTML

1
2
3
<div class="menu">

</div>

CSS

1
2
3
4
5
6
.menu {
  border-top: 60px double;
  height: 20px;
  border-bottom: 20px solid;
  width: 80px;
}

输出