您的位置：首页 > Web前端 > CSS

[转]纯css实现带三角箭头带描边带阴影带圆角的兼容各浏览器de气泡层

2010-11-09 15:21 786 查看
上次看了乔花的文章<<CSS Border使用小分享>>，刚好手上有个需求，是做一个弹出气泡层，要求是

1.带三角指示箭头

2.边框需要描边

3.渐进圆角

有了那篇文章的启发之后，我们这里做起来就简单了

说做就做，咱先整个描了边的浮动层，效果如下





接着给浮动层，加上三角的箭头指示，在div容器里面加入一个空的s标签，表示三角

<html>
<head>
<style>
div{
position:absolute;
top:30px;
left:40px;
display:block;
height:100px;
width:200px;
border:1px solid #666;
}
s{
position:absolute;
top:-21px;
left:20px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
</style>
</head>
<body>
<div>
<s></s>
</div>
</body>
</html>


效果，





现在，我们需要一个白色背景的小三角将原来的深色三角遮住，用深色三角做底，为了颜色更明显一些，我这里用#ff0做底色，在s标签内嵌套一个空的i标签，并设置它的边框宽度略小一点

<html>
<head>
<style>
div{
position:absolute;
top:30px;
left:40px;
display:block;
height:100px;
width:200px;
border:1px solid #666;
background-color:#ff0;
}
s{
position:absolute;
top:-21px;
left:20px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
i{
position:absolute;
top:-9px;
left:-10px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #ff0 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
</style>
</head>
<body>
<div>
<s>
<i></i>
</s>
</div>
</body>
</html>


效果，





还不错吧，不过在IE下，有点小瑕疵，三角的定位有点的问题，简单hack一下，并把背景颜色改回白色

<html>
<head>
<style>
div{
position:absolute;
top:30px;
left:40px;
display:block;
height:100px;
width:200px;
border:1px solid #666;
background-color:#fff;
}
s{
position:absolute;
top:-21px;
*top:-20px;
left:20px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
i{
position:absolute;
top:-9px;
*top:-9px;
left:-10px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #fff transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
</style>
</head>
<body>
<div>
<s>
<i></i>
</s>
</div>
</body>
</html>


这样在IE下效果也ok了





接着，我们需要给气泡层加上阴影效果。

对于IE浏览器，我们需要使用滤镜Shadow，具体资料参考MSDN，http://msdn.microsoft.com/en-us/library/ms533086%28VS.85%29.aspx

对于支持CSS3的标准浏览器，我们可以用boxshadow属性，而对于firefox或webkit核心的浏览器，需要使用各自的私有实现，合起来写就是

div{
box-shadow: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}


在firefox效果是ok的，但是ie又bug了







IE里面的三角箭头没了。。。

初步检查的结果是，怀疑由于css边框三角是没有盒子高度宽度的，所以阴影效果出不来，还把原来的三角给盖掉了。。。

没办法，只好想个招，在div容器里面再做一个100% 大小的div，做气泡层的内容层

<html>
<head>
<style>
div.container{
position:absolute;
top:30px;
left:40px;
display:block;
height:100px;
width:200px;
border:1px solid #666;
background-color:#fff;
}
s{
position:absolute;
top:-21px;
*top:-20px;
left:20px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
i{
position:absolute;
top:-9px;
*top:-9px;
left:-10px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #fff transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
.content{
width:100%;
height:100%;
        box-shadow: 3px 3px 4px #999;
        -moz-box-shadow: 3px 3px 4px #999;
        -webkit-box-shadow: 3px 3px 4px #999;
        /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
        /* For IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
<s>
<i></i>
</s>
</div>
</body>
</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的视觉差，是用户看上去是一个圆角





这样最终的兼容代码为

<html>
<head>
<style>
div.container{
position:absolute;
top:30px;
left:40px;
display:block;
height:100px;
width:200px;
background-color:transparent;
*border:1px solid #666;
}
s{
position:absolute;
top:-20px;
*top:-22px;
left:20px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
i{
position:absolute;
top:-9px;
*top:-9px;
left:-10px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #fff transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
.content{
border:1px solid #666;
-moz-border-radius:3px;
-webkit-border-radius:3px;
position:absolute;
background-color:#fff;
width:100%;
height:100%;
*top:-2px;
*border-top:1px solid #666;
*border-top:1px solid #666;
*border-left:none;
*border-right:none;
*height:102px;
        box-shadow: 3px 3px 4px #999;
        -moz-box-shadow: 3px 3px 4px #999;
        -webkit-box-shadow: 3px 3px 4px #999;
        /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
        /* For IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}
</style>
</head>
<body>
<div class="container">
<div class="content">a</div>
<s>
<i></i>
</s>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航