上次看了乔花的文章<<CSS Border使用小分享>>，刚好手上有个需求，是做一个弹出气泡层，要求是
1.带三角指示箭头
2.边框需要描边
3.渐进圆角
有了那篇文章的启发之后，我们这里做起来就简单了
说做就做，咱先整个描了边的浮动层，效果如下
接着给浮动层，加上三角的箭头指示，在div容器里面加入一个空的s标签，表示三角
1: <html>
2: <head>
3: <style>
4: div{ 5: position:absolute; 6: top:30px; 7: left:40px; 8: display:block; 9: height:100px; 10: width:200px; 11: border:1px solid #666; 12: } 13: s{ 14: position:absolute; 15: top:-21px; 16: left:20px; 17: display:block; 18: height:0; 19: width:0; 20: font-size: 0; 21: line-height: 0; 22: border-color:transparent transparent #666 transparent; 23: border-style:dashed dashed solid dashed; 24: border-width:10px; 25: }26: </style>
27: </head>
28: <body>
29: <div>
30: <s></s>
31: </div>
32: </body>
33: </html>
效果，
现在，我们需要一个白色背景的小三角将原来的深色三角遮住，用深色三角做底，为了颜色更明显一些，我这里用#ff0做底色，在s标签内嵌套一个空的i标签，并设置它的边框宽度略小一点
1: <html>
2: <head>
3: <style>
4: div{ 5: position:absolute; 6: top:30px; 7: left:40px; 8: display:block; 9: height:100px; 10: width:200px; 11: border:1px solid #666; 12: background-color:#ff0; 13: } 14: s{ 15: position:absolute; 16: top:-21px; 17: left:20px; 18: display:block; 19: height:0; 20: width:0; 21: font-size: 0; 22: line-height: 0; 23: border-color:transparent transparent #666 transparent; 24: border-style:dashed dashed solid dashed; 25: border-width:10px; 26: } 27: i{ 28: position:absolute; 29: top:-9px; 30: left:-10px; 31: display:block; 32: height:0; 33: width:0; 34: font-size: 0; 35: line-height: 0; 36: border-color:transparent transparent #ff0 transparent; 37: border-style:dashed dashed solid dashed; 38: border-width:10px; 39: }40: </style>
41: </head>
42: <body>
43: <div>
44: <s>
45: <i></i>
46: </s>
47: </div>
48: </body>
49: </html>
效果，
还不错吧，不过在IE下，有点小瑕疵，三角的定位有点的问题，简单hack一下，并把背景颜色改回白色
1: <html>
2: <head>
3: <style>
4: div{ 5: position:absolute; 6: top:30px; 7: left:40px; 8: display:block; 9: height:100px; 10: width:200px; 11: border:1px solid #666; 12: background-color:#fff; 13: } 14: s{ 15: position:absolute; 16: top:-21px; 17: *top:-20px; 18: left:20px; 19: display:block; 20: height:0; 21: width:0; 22: font-size: 0; 23: line-height: 0; 24: border-color:transparent transparent #666 transparent; 25: border-style:dashed dashed solid dashed; 26: border-width:10px; 27: } 28: i{ 29: position:absolute; 30: top:-9px; 31: *top:-9px; 32: left:-10px; 33: display:block; 34: height:0; 35: width:0; 36: font-size: 0; 37: line-height: 0; 38: border-color:transparent transparent #fff transparent; 39: border-style:dashed dashed solid dashed; 40: border-width:10px; 41: }42: </style>
43: </head>
44: <body>
45: <div>
46: <s>
47: <i></i>
48: </s>
49: </div>
50: </body>
51: </html>
这样在IE下效果也ok了
接着，我们需要给气泡层加上阴影效果。
对于IE浏览器，我们需要使用滤镜Shadow，具体资料参考MSDN，http://msdn.microsoft.com/en-us/library/ms533086%28VS.85%29.aspx
对于支持CSS3的标准浏览器，我们可以用boxshadow属性，而对于firefox或webkit核心的浏览器，需要使用各自的私有实现，合起来写就是
1: div{ 2: box-shadow: 3px 3px 4px #999; 3: -moz-box-shadow: 3px 3px 4px #999; 4: -webkit-box-shadow: 3px 3px 4px #999; 5: /* For IE 5.5 - 7 */ 6: filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); 7: /* For IE 8 */ 8: -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; 9: }在firefox效果是ok的，但是ie又bug了
IE里面的三角箭头没了。。。
初步检查的结果是，怀疑由于css边框三角是没有盒子高度宽度的，所以阴影效果出不来，还把原来的三角给盖掉了。。。
没办法，只好想个招，在div容器里面再做一个100% 大小的div，做气泡层的内容层
1: <html>
2: <head>
3: <style>
4: div.container{ 5: position:absolute; 6: top:30px; 7: left:40px; 8: display:block; 9: height:100px; 10: width:200px; 11: border:1px solid #666; 12: background-color:#fff; 13: } 14: s{ 15: position:absolute; 16: top:-21px; 17: *top:-20px; 18: left:20px; 19: display:block; 20: height:0; 21: width:0; 22: font-size: 0; 23: line-height: 0; 24: border-color:transparent transparent #666 transparent; 25: border-style:dashed dashed solid dashed; 26: border-width:10px; 27: } 28: i{ 29: position:absolute; 30: top:-9px; 31: *top:-9px; 32: left:-10px; 33: display:block; 34: height:0; 35: width:0; 36: font-size: 0; 37: line-height: 0; 38: border-color:transparent transparent #fff transparent; 39: border-style:dashed dashed solid dashed; 40: border-width:10px; 41: } 42: .content{ 43: width:100%; 44: height:100%; 45: box-shadow: 3px 3px 4px #999; 46: -moz-box-shadow: 3px 3px 4px #999; 47: -webkit-box-shadow: 3px 3px 4px #999; 48: /* For IE 5.5 - 7 */ 49: filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); 50: /* For IE 8 */ 51: -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; 52: }53: </style>
54: </head>
55: <body>
56: <div class="container">
57: <div class="content"></div>
58: <s>
59: <i></i>
60: </s>
61: </div>
62: </body>
63: </html>
结果，firefox继续ok，IE继续悲剧…
仔细捣鼓一番之后，怀疑是外部容器把阴影效果给遮住了，那么把div单独拿出来，绝对定位看看效果呢
于是给content属性，加了position:absolute，兴冲冲的跑去ie一看，还是不行。。。
怪事了！！！
于是各种捣鼓和资料，发现了这么一个有趣的现象。在IE下的shadow属性，如果不设置盒模型的背景颜色的话，那么shadow默认是文字阴影，见效果
只有设置盒模型的背景颜色之后，盒子的阴影才生效。
这样，一个带描边的带三角的气泡层就新鲜出炉了。我们还可以给div加上css3的圆角，同时修改将气泡层的边框从container放置content中，设置打底的container为透明，效果如下
这样，唯一美中不足的就是我们的IE不支持圆角，别急，我们还是可以实现近似圆角在IE下
IE下，我们可以用两个div叠加，做底的div提供一个四边框，里面的div绝对定位，上下边框比做的div分别高出1px，利用一个1px的视觉差，是用户看上去是一个圆角
这样最终的兼容代码为
1: <html>
2: <head>
3: <style>
4: div.container{ 5: position:absolute; 6: top:30px; 7: left:40px; 8: display:block; 9: height:100px; 10: width:200px; 11: background-color:transparent; 12: *border:1px solid #666; 13: } 14: s{ 15: position:absolute; 16: top:-20px; 17: *top:-22px; 18: left:20px; 19: display:block; 20: height:0; 21: width:0; 22: font-size: 0; 23: line-height: 0; 24: border-color:transparent transparent #666 transparent; 25: border-style:dashed dashed solid dashed; 26: border-width:10px; 27: } 28: i{ 29: position:absolute; 30: top:-9px; 31: *top:-9px; 32: left:-10px; 33: display:block; 34: height:0; 35: width:0; 36: font-size: 0; 37: line-height: 0; 38: border-color:transparent transparent #fff transparent; 39: border-style:dashed dashed solid dashed; 40: border-width:10px; 41: } 42: .content{ 43: border:1px solid #666; 44: -moz-border-radius:3px; 45: -webkit-border-radius:3px; 46: position:absolute; 47: background-color:#fff; 48: width:100%; 49: height:100%; 50: *top:-2px; 51: *border-top:1px solid #666; 52: *border-top:1px solid #666; 53: *border-left:none; 54: *border-right:none; 55: *height:102px; 56: box-shadow: 3px 3px 4px #999; 57: -moz-box-shadow: 3px 3px 4px #999; 58: -webkit-box-shadow: 3px 3px 4px #999; 59: /* For IE 5.5 - 7 */ 60: filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); 61: /* For IE 8 */ 62: -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; 63: }64: </style>
65: </head>
66: <body>
67: <div class="container">
68: <div class="content">a</div>
69: <s>
70: <i></i>
71: </s>
72: </div>
73: </body>
74: </html>
