CSS “边框法”实现气泡对话框效果的高级应用实例页面
代码:
CSS代码:
.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;} .test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;} .test span.bot{ border-width:20px; border-style:solid dashed dashed; border-color:#beceeb transparent transparent; left:80px; bottom:-40px; } .test span.top{ border-width:20px; border-style:solid dashed dashed; border-color:#ffffff transparent transparent; left:80px; bottom:-33px; }
HTML代码:
<div class="test"> <span class="bot"></span> <span class="top"></span> CSS “边框法”实现气泡对话框效果二 </div>
效果:
CSS “边框法”实现气泡对话框效果二