纯css的圆角提示框 全兼容
<!doctype <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a>> <html> <head> <meta charset="utf-8"> <title>纯css的圆角提示框全兼容_www.itjxue.com</title> <style> /*公共样式*/ .test{width:100%;font-size:12px; position:relative;} .bBottom,.tTop{height:2px; background:transparent;} .b2,.t1{border-top:#F30 solid 1px; margin:0 2px; height:0; overflow:hidden; display:block;} .b1,.t2{border-right:#F00 solid 1px;border-left:#F00 solid 1px; margin:0 1px; display:block; height:1px; overflow:hidden;} .content{border:#F00 solid 1px; border-top:none; border-bottom:none; padding:5px 10px;} .s1_s2{position:absolute; left:5%;overflow:hidden; width:12px; height:6px; bottom:-5px;} .s1{color:#F00; position:absolute; margin-top:-6px;} .s2{color:#F00; position:absolute; margin-top:-7px; color:#FFF;} /*各种颜色*/ /*blue*/ .blue{border-color:blue; color:blue;} .red{border-color:red; color:red;} .yellow{border-color:yellow; color:yellow;} .green{border-color:green; color:green;} .pink{border-color:pink; color:pink;} </style> </head> <body> <div class="test"> <div class="tTop"> <span class="t1"></span> <span class="t2"></span> </div> <div class="content"> 这里提示的文字 </div> <div class="bBottom"> <span class="b1"></span> <span class="b2"></span> </div> <div class="s1_s2"> <span class="s1">◆</span> <span class="s2">◆</span> </div> </div> <br> <div class="test"> <div class="tTop"> <span class="t1 blue"></span> <span class="t2 blue"></span> </div> <div class="content blue"> 这里提示的文字 </div> <div class="bBottom"> <span class="b1 blue"></span> <span class="b2 blue"></span> </div> <div class="s1_s2"> <span class="s1 blue">◆</span> <span class="s2">◆</span> </div> </div> <br> <div class="test"> <div class="tTop"> <span class="t1 yellow"></span> <span class="t2 yellow"></span> </div> <div class="content yellow"> 这里提示的文字 </div> <div class="bBottom"> <span class="b1 yellow"></span> <span class="b2 yellow"></span> </div> <div class="s1_s2"> <span class="s1 yellow">◆</span> <span class="s2">◆</span> </div> </div> <br> <div class="test"> <div class="tTop"> <span class="t1 green"></span> <span class="t2 green"></span> </div> <div class="content green"> 这里提示的文字 </div> <div class="bBottom"> <span class="b1 green"></span> <span class="b2 green"></span> </div> <div class="s1_s2"> <span class="s1 green">◆</span> <span class="s2">◆</span> </div> </div> <br> <div class="test"> <div class="tTop"> <span class="t1 pink"></span> <span class="t2 pink"></span> </div> <div class="content pink"> 这里提示的文字 </div> <div class="bBottom"> <span class="b1 pink"></span> <span class="b2 pink"></span> </div> <div class="s1_s2"> <span class="s1 pink">◆</span> <span class="s2">◆</span> </div> </div> </body> </html>
[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]