主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
兼容的HTML5的网页圆角提示框
2014-10-12
网页编程网
网页编程网
<!doctype html><html><head><meta charset="utf-8"> <title>纯css的圆角提示框全兼容_www.youkud.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>
阅读原文
阅读
4508
123
显示电脑版