当前位置:首页 > 技术文章 > WEB开发 > DIV+CSS

CSS 边框法实现气泡对话框效果

发布时间:2017-12-06 16:16:52 作者:匿名 来源:网络 点击量:

 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>

 

 1.png

 

 

本文链接:http://www.topjishu.net/article/24.html,如有转载,请注明出处!


关键词:CSS,边框法,气泡对话框


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表