纯CSS实现各类气球泡泡对话框效果
2015-07-30 17:05
621 查看
.test{width:300px; padding:30px 20px; margin-left:60px; background:#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; border-color:#ffffff #beceeb #beceeb #ffffff; left:-40px; top:40px; } .test span.top{ border-width:10px 20px; border-style:dashed solid solid dashed; border-color:transparent #ffffff #ffffff transparent; left:-40px; top:60px; }
HTML代码如下:
<div class="test"> <span class="bot"></span> <span class="top"></span> CSS “边框法”实现气泡对话框效果一 </div>
相关文章推荐
- 关于使用css将DIV模拟成为表格
- 2014辛星在读CSS第八节 使用背景图片
- CSS3仿移动淘宝左下角扇形菜单效果
- web开发CSS样式Position详解
- CSS学习笔记2--超级炫酷的进度条
- JS动态加载JS与CSS文件
- CSS中常用的四种选择器
- html以及css中注意的属性
- 使用less开发css
- CSS 外边距合并
- html及css学习笔记_13_css三种选择器(selector)
- css3动画 bug 2点
- css3动画 bug
- Js_Span 滑动手型鼠标样式
- CSS之BFC(块级格式化上下文)
- 纯css解决position:abusolute的div居中显示
- fullPage.js — 回调函数演示和animate.css使用-------全屏滚动加载动画
- html及css学习笔记_12_css三种使用方式
- css-01
- MVC项目发布IIS CSS无法加载