纯CSS实现提示框小三角
2011-11-06 23:09
309 查看
注:IE6不支持边框transparent,当设置成透明时显示为黑色。而当border-style为dotted或dashed时,点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(height>=border-width*3),虚线宽长度必须是其宽度的5倍 以上(height>=border-width*5),否则点线和虚线都不会出现。最后一种效果即是利用IE6这个特性解决其边框颜色不支持透明。
<!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=gb2312"/> <title></title> <style type="text/css"> .box{background-color:#EEEEEE;width:300px;height:60px;margin:50px 100px;position:relative;} .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;} .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;} .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;} .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;} </style> </head> <body> <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> </body> </html>
相关文章推荐
- div+css实现带三角箭头提示框
- 纯CSS实现小三角提示信息
- 纯CSS实现提示框小三角
- javascript和css实现垂直方向自适应的三角提示菜单
- div+css实现带三角箭头提示框
- 纯CSS实现小三角提示信息
- 用css伪类实现提示对话框的小三角,哈哈!
- div+css实现带三角箭头提示框
- div+css实现的小三角tip小提示(原理及代码)
- 纯CSS实现提示框小三角
- 浅析新浪微博:以css实现的小三角提示框
- 纯CSS实现鼠标悬停提示的方法
- CSS实现带倒三角标记的WEB标准菜单效果代码
- [转]单纯使用CSS实现动态提示信息
- 巧用css技巧实现三角符号
- 纯CSS提示框的实现及其牵涉到的IE6下的a:hover问题。
- css实现倒三角包含文字标签
- 纯CSS实现tooltip提示框,CSS箭头及形状
- 用css实现的提示信息
- 用 js、html、css实现一个弹出提示控件: