纯CSS实现气泡提示框聊天框效果
世界上的语言多种多样，字符的种类也是千差万别，形状也是千奇百怪，所以，有些字符就可以当作图形来使用，以模拟一些web表现效果。很多对话框尖角就可以使用棱形字符(◆)来实现，我们可以让其溢出div显示，不就有了尖角效果了吗！定位可以使用margin负值或是absolute绝对定位。
注：IE6不支持边框transparent，当设置成透明时显示为黑色。而当border-style为dotted或dashed时，点线与虚线均以边框宽度为基准，点线长度必须是其宽度的3倍以上（height>=border-width*3），虚线宽长度必须是其宽度的5倍 以上（height>=border-width*5），否则点线和虚线都不会出现。最后一种效果即是利用IE6这个特性解决其边框颜色不支持透明。
css代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .box{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border-radius: 5px;} .box .jt{border-width:0 10px 10px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:50px;top:-10px;_top:-12px;} .box2{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border:1px solid #CCCCCC;border-radius: 5px;} .box2 .jt{position:absolute;color:#CCCCCC;left:50px;top:-12px;font-size:22px;font-family:arial,verdana,sans-serif;} .box2 .jt2{position:absolute;color:#EEEEEE;top:1px;left:0;} .box3{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border-radius: 5px;} .box3 .jt{border-width:0 0 15px 30px;border-color:#EEEEEE #FFFFFF;border-style:solid;width:0;height:0;font-size:0;position:absolute;left:-30px;top:25px;} .box4{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;border-radius: 5px;} .box4 div{width:0;height:0;font-size:0;position:absolute;} .box4 .jt{border-width:10px;border-color:#FFF #EEE #EEE #FFF;border-style:solid;left:-20px;top:20px;} .box4 .jt2{border-width:5px 10px ;border-color:transparent #FFF #FFF transparent;border-style:dashed solid solid dashed;left:-20px;top:30px;} |
html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="box"> <div class="jt"></div> </div> <div class="box2"> <span class="jt">◆<span class="jt2">◆</span></span> </div> <div class="box3"> <div class="jt"></div> </div> <div class="box4"> <div class="jt"></div> <div class="jt2"></div> </div> |
代码预览
也可以看看我博客右边侧边栏的评论框效果：
VBA连接SQLSERVER 数据库实例的方法 jQuery 判断页面元素是否存在的代码
