标签：
<!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"> <html> <head> <meta charset="utf-8" /> <meta name="author" content="GBin1.com" /> <title>纯CSS实现的气泡提示框丨秦皇岛轻质隔墙板</title> <style type="text/css"> body{ font-size:14px; font-family:arial; background: #CCC; } #container{ margin: 0 auto; width: 600px; padding-top: 10px; } h1{ font-size: 28px; margin: 5px; } /* bubble */ .tip-bubble { position: relative; background-color: #202020; width: 100px; padding: 20px; color: #CCC; text-align: center; border-radius: 10px; margin: 50px; border: 1px solid #111; box-shadow: 1px 1px 2px #202020; -moz-box-shadow: 1px 1px 2px #202020; -webkit-border-shadow: 1px 1px 2px #202020; text-shadow: 0px 0px 15px #fff; } .tip-bubble:after { content: ‘‘; position: absolute; width: 0; height: 0; border: 15px solid; } /* Position the Arrow */ .tip-bubble-top:after { border-bottom-color: #202020; left: 50%; bottom: 100%; margin-left: -15px; } .tip-bubble-right:after { border-left-color: #202020; left: 100%; top: 50%; margin-top: -15px; } .tip-bubble-bottom:after { border-top-color: #202020; top: 100%; left: 50%; margin-left: -15px; } .tip-bubble-left:after { border-right-color: #202020; top: 50%; right: 100%; margin-top: -15px; } </style> </head> <body> <div id="container"> <h1>Bubble Tips by CSS</h1> <div class="tip-bubble tip-bubble-left">Welcome To CsrCode.Cn</div> <div class="tip-bubble tip-bubble-right">Arrow on bottom</div> <div class="tip-bubble tip-bubble-bottom">Welcome To CsrCode.Cn</div> </div> </body> </html> <br><br><hr>
标签：
原文地址：http://www.cnblogs.com/youtianxia/p/4722649.html
