鸿 网 互 联 www.68idc.cn

css实现气泡对话框-Demo

来源:互联网 作者:佚名 时间:2013-07-04 20:13
网上也有很多的案例,这里也只是以自己的方法实现。 原理,还是比较简单的。 只是半透明的那个案例,遇到了些问题,最终还是选择避开问题的方法解决了。 1 .bubble_diailog { position : relative ; background : #ffc ; border : 1px solid #ccc ; border-r

网上也有很多的案例,这里也只是以自己的方法实现。

原理,美国服务器,还是比较简单的。

只是半透明的那个案例,美国空间,遇到了些问题,服务器空间,最终还是选择避开问题的方法解决了。

1 .bubble_diailog{position: relative;background: #ffc;border:1px solid #ccc;border-radius: 3px;margin:20px 0 0 20px;} 2 .bubble_diailog i,.bubble_diailog b{position: absolute;width: 0;height: 0;overflow: hidden;border-width:5px;display:block;} {border-style: dashed dashed solid dashed;} 5 .bubble_diailog i.t{top:-10px;left:30px;border-color:transparent transparent #ccc transparent;} 6 .bubble_diailog b.t{top:-9px;left:30px;border-color:transparent transparent #ffc transparent;} {border-style:solid dashed dashed dashed;} 9 .bubble_diailog i.b{bottom:-10px;left:30px;border-color:#ccc transparent transparent transparent;} 10 .bubble_diailog b.b{bottom:-9px;left:30px;border-color:#ffc transparent transparent transparent;} {border-style:dashed solid dashed dashed;} 13 .bubble_diailog i.l{top:29px;left:-10px;border-color:transparent #ccc transparent transparent;} 14 .bubble_diailog b.l{top:29px;left:-9px;border-color:transparent #ffc transparent transparent;} {border-style:dashed dashed dashed solid;} 17 .bubble_diailog i.r{top:29px;right:-10px;border-color:transparent transparent transparent #ccc;} 18 .bubble_diailog b.r{top:29px;right:-9px;border-color:transparent transparent transparent #ffc;} {width: 200px;height: 80px;} * 24 * IE ARGB背景半透明滤镜溢出隐藏bug 25 * {border-radius: 3px;margin:-40px 0 0 20px;font-size:14px; 28 background-color:rgba(0,0,0,.8);position:relative; 29 } 30 .bubble_opacity,.bubble_opacity .in{width:200px;height:80px;} 31 .bubble_opacity .in{filter: progid:dximagetransform.microsoft.gradient(startcolorstr="#CC000000", endcolorstr="#CC000000");} 32 .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);} 33 .bubble_opacity p{padding:20px 0 0 20px;color:#fff;}

网友评论
<