css实现气泡对话框-Demo
2013-03-29 15:41
549 查看
网上也有很多的案例,这里也只是以自己的方法实现。
原理,还是比较简单的。
只是半透明的那个案例,遇到了些问题,最终还是选择避开问题的方法解决了。
[/i]
[/b]
[/i]
[/b]
[/i]
[/b]
[/i]
[/b]
亲,我是半透明的哦!~
原理,还是比较简单的。
只是半透明的那个案例,遇到了些问题,最终还是选择避开问题的方法解决了。
.bubble_diailog{position: relative;background: #ffc;border:1px solid #ccc;border-radius: 3px;margin:20px 0 0 20px;} .bubble_diailog i,.bubble_diailog b{position: absolute;width: 0;height: 0;overflow: hidden;border-width:5px;display:block;} /*上*/ .bubble_diailog i.t,.bubble_diailog b.t{border-style: dashed dashed solid dashed;} .bubble_diailog i.t{top:-10px;left:30px;border-color:transparent transparent #ccc transparent;} .bubble_diailog b.t{top:-9px;left:30px;border-color:transparent transparent #ffc transparent;} /*下*/ .bubble_diailog i.b,.bubble_diailog b.b{border-style:solid dashed dashed dashed;} .bubble_diailog i.b{bottom:-10px;left:30px;border-color:#ccc transparent transparent transparent;} .bubble_diailog b.b{bottom:-9px;left:30px;border-color:#ffc transparent transparent transparent;} /*左*/ .bubble_diailog i.l,.bubble_diailog b.l{border-style:dashed solid dashed dashed;} .bubble_diailog i.l{top:29px;left:-10px;border-color:transparent #ccc transparent transparent;} .bubble_diailog b.l{top:29px;left:-9px;border-color:transparent #ffc transparent transparent;} /*右*/ .bubble_diailog i.r,.bubble_diailog b.r{border-style:dashed dashed dashed solid;} .bubble_diailog i.r{top:29px;right:-10px;border-color:transparent transparent transparent #ccc;} .bubble_diailog b.r{top:29px;right:-9px;border-color:transparent transparent transparent #ffc;} .size_1{width: 200px;height: 80px;} /** * IE ARGB背景半透明滤镜溢出隐藏bug * http://himeters.com/ie-argb-overflowhidden-bug */ .bubble_opacity{border-radius: 3px;margin:-40px 0 0 20px;font-size:14px; background-color:rgba(0,0,0,.8);position:relative; } .bubble_opacity,.bubble_opacity .in{width:200px;height:80px;} .bubble_opacity .in{filter: progid:dximagetransform.microsoft.gradient(startcolorstr="#CC000000", endcolorstr="#CC000000");} .bubble_opacity i{overflow:hidden;display:block;height:0;width:0;border-style:dashed dashed solid dashed;border-color:transparent transparent #000 transparent;position:absolute;top:-10px;left:30px;border-width:5px;opacity: .8;filter:alpha(opacity=80);} .bubble_opacity p{padding:20px 0 0 20px;color:#fff;}
<!-- 上 --> <div class="bubble_diailog size_1"> <i class="t"></i> <b class="t"></b> </div> <!-- 下 --> <div class="bubble_diailog size_1"> <i class="b"></i> <b class="b"></b> </div> <!-- 左 --> <div class="bubble_diailog size_1"> <i class="l"></i> <b class="l"></b> </div> <!-- 右 --> <div class="bubble_diailog size_1"> <i class="r"></i> <b class="r"></b> </div> <!-- 半透明 --> <div class="bubble_opacity"> <i></i> <div class="in"> <p>亲,我是半透明的哦!~</p> </div> </div>
[/i]
[/b]
[/i]
[/b]
[/i]
[/b]
[/i]
[/b]
亲,我是半透明的哦!~
相关文章推荐
- 纯css实现气泡对话框尖角处理
- css实现气泡对话框
- 分享Css3设计---纯Css实现超酷的iphone玻璃气泡效果
- CSS绘制无图片的气泡对话框
- CSS特殊样式(三)纯CSS实现各类气球泡泡对话框效果
- 纯CSS实现的气泡提示框
- 纯CSS打造Bubble气泡提示框实现代码
- 纯CSS气泡对话框
- 纯CSS气泡框实现方法探究
- 纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)
- css实现会话气泡的效果
- 纯CSS实现轮播小Demo
- css实现聊天气泡效果
- 纯CSS代码实现各类气球泡泡对话框效果
- js+Css实现的一个简单对话框
- 分享Css3设计---纯Css实现超酷的iphone玻璃气泡效果
- CSS导航布局中当前页面的具体实现demo示例
- 纯CSS实现各类气球泡泡对话框效果
- css实现会话气泡的效果
- 纯css实现扁平化360卫士logo demo