纯CSS实现各类气球泡泡对话框效果 

边框法复杂应用实现的效果 张鑫旭-鑫空间-鑫生活

 1 .test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}
 2 .test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
 3 .test span.bot{
 4     border-width:20px; 
 5     border-style:solid; 
 6     border-color:#ffffff #beceeb #beceeb #ffffff; 
 7     left:-40px; 
 8     top:40px;
 9 }
10 .test span.top{
11     border-width:10px 20px; 
12     border-style:dashed solid solid dashed; 
13     border-color:transparent #ffffff #ffffff transparent; 
14     left:-40px; 
15     top:60px;
16 }
17

HTML代码如下：

<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果一
</div>

 



 






		

		
posted @ 
2015-07-30 17:05 
汪强胜 
Views(291) 
Comments(0) 
Edit 
收藏 
举报