氣泡提示能給用戶良好的瀏覽體驗，相信大部分前端人都做過吧？(什么？你沒做過，那信息提示層總做過吧？！)
最近在網上看到了一種寫氣泡提示的純CSS代碼，其代碼簡練，兼容性之強，是非常少見的，效果如下圖。
首先，是第一種，利用字符“◆”實現。
請看代碼，HTML部分：
|
1
2
3
4
|
<
div
class
=
"poptip"
>
<
span
class
=
"poptip-arrow poptip-arrow-bottom"
><
em
>◆</
em
><
i
>◆</
i
></
span
>
這是氣泡提示，純CSS[◆字符]寫的哦
</
div
>
|
CSS部分(上面的CSS代碼看上去很多，但其實已經很簡練了)：
|
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
|
.poptip {
position
:
absolute
;
top
:
20px
;
left
:
20px
;
padding
:
6px
10px
5px
;
*
padding
:
7px
10px
4px
;
line-height
:
16px
;
color
:
#DB7C22
;
font-size
:
12px
;
background-color
:
#FFFCEF
;
border
:
solid
1px
#FFBB76
;
border-radius:
2px
;
box-shadow:
0
0
3px
#ddd
;
}
.poptip-arrow {
position
:
absolute
;
overflow
:
hidden
;
font-style
:
normal
;
font-family
: simsun;
font-size
:
12px
;
text-shadow
:
0
0
2px
#ccc
;
}
.poptip-arrow em,.poptip-arrow i {
position
:
absolute
;
left
:
0
;
top
:
0
;
font-style
:
normal
;
}
.poptip-arrow em {
color
:
#FFBB76
;
}
.poptip-arrow i {
color
:
#FFFCEF
;
text-shadow
:
none
;
}
.poptip-arrow-
top
,.poptip-arrow-
bottom
{
height
:
6px
;
width
:
12px
;
left
:
12px
;
margin-left
:
-6px
;
}
.poptip-arrow-
left
,.poptip-arrow-
right
{
height
:
12px
;
width
:
6px
;
top
:
12px
;
margin-top
:
-6px
;
}
.poptip-arrow-
top
{
top
:
-6px
;
}
.poptip-arrow-
top
em {
top
:
-1px
;
}
.poptip-arrow-
top
i{
top
:
0px
;
}
.poptip-arrow-
bottom
{
bottom
:
-6px
;
}
.poptip-arrow-
bottom
em {
top
:
-8px
;
}
.poptip-arrow-
bottom
i {
top
:
-9px
;
}
.poptip-arrow-
left
{
left
:
-6px
;
}
.poptip-arrow-
left
em {
left
:
1px
;
}
.poptip-arrow-
left
i {
left
:
2px
;
}
.poptip-arrow-
right
{
right
:
-6px
;
}
.poptip-arrow-
right
em {
left
:
-6px
;
}
.poptip-arrow-
right
i {
left
:
-7px
;
}
|
第二種，邊框實現，一樣，直接上代碼：
HTML部分：
|
1
2
3
4
5
|
<
div
class
=
"message-box"
>
<
span
>這是氣泡提示，純CSS[border]寫的哦</
span
>
<
div
class
=
"triangle-border tb-background"
></
div
>
<
div
class
=
"triangle-border tb-border"
></
div
>
</
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
24
25
26
27
28
29
30
|
.
message-box
{
position
:
relative
;
width
:
240px
;
height
:
60px
;
line-height
:
60px
;
background
:
#E9FBE4
;
box-shadow:
1px
2px
3px
#E9FBE4
;
border
:
1px
solid
#C9E9C0
;
border-radius:
4px
;
text-align
:
center
;
color
:
#0C7823
;
font-size
:
12px
;
}
.triangle-border {
position
:
absolute
;
left
:
30px
;
overflow
:
hidden
;
width
:
0
;
height
:
0
;
border-width
:
10px
;
border-style
:
solid
dashed
dashed
dashed
;
}
.tb-background {
bottom
:
-20px
;
border-color
:
#C9E9C0
transparent
transparent
transparent
;
}
.tb-border {
bottom
:
-19px
;
border-color
:
#E9FBE4
transparent
transparent
transparent
;
}
|