首页 > 代码库 > 纯css设置气泡
纯css设置气泡
/*css代码*/
/* poptip */
.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结构*/
<div class=
"poptip"
>
<span class=
"poptip-arrow poptip-arrow-top"
><em>◆</em><i>◆</i></span>
<span class=
"poptip-arrow poptip-arrow-right"
><em>◆</em><i>◆</i></span>
<span class=
"poptip-arrow poptip-arrow-bottom"
><em>◆</em><i>◆</i></span>
<span class=
"poptip-arrow poptip-arrow-left"
><em>◆</em><i>◆</i></span>
注销
</div>
纯css设置气泡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。