当前位置:首页 > 技术文章 > 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,边框法,气泡对话框


版权声明:TOP技术学院所发布内容部分为原创发布,本着技术分享的精神,也有部分收集整理来自互联网,对于来源明确的内容,会严格注明出处。收集整理的内容本平台不拥有所有权,也不承担相关法律责任。如果您发现本平台中有涉嫌抄袭的内容,可以联系管理员进行举报,并提供相关证据,一经查实,本平台将立刻删除涉嫌侵权内容。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表