<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小三角</title>
<style type="text/css">
.tip{
border:1px solid #ccc;
background:#ccc;
height:50px;
width:300px;
color:#fff;
overflow:hidden;
zoom:1;
position:relative;
}
.box{
height:0;
width:0;
border:1px solid #ccc;
border-width:10px 10px 0 10px; border-color:#ccc #fff;
position:relative;
left:40px;
}
em{
display:block;
position:absolute;
top:20px;
left:500px;
width:24px;
height:17px;
line-height:17px;
background:#000;
color:#fff;
font-style:normal;
text-align:center;
z-index:2;
-moz-border-radius:2px;/*低版本Firefox浏览器 圆角*/
-webkit-border-radius:2px;/*低版本Chorme和Safari浏览器 圆角*/
border-radius:2px;/*其他浏览器 圆角*/
behavior:url(tool_iecss3.htc);/*IE浏览器 圆角*/
}
em{ background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: block;
font-style: normal;
height: 47px;
line-height:22px;
line-height: 17px;
position: absolute;
right: 20px;
text-align:center;
top:20px;
width:60px;
font-size:12px;
z-index: 2;}
em i {
border-right: 8px solid transparent;
border-top: 6px solid #000000;
height: 0;
left: 6px;
position: absolute;
top: 47px;
width: 0;
</style>
</head>
<body>
<div class="tip">你好~我是提示框</div>
<div class="box"></div>
<em>
我是提示框你好~我是提示框
<i></i>
</em>
</body>
</html>
第一个不兼容ie6 ie7 第二个ok
[img]http://dl.iteye.com/upload/attachment/0071/5829/016a5dcc-0d20-3964-a4c7-419839a4f1bf.jpg[/img]
1541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
