带箭头阴影的提示框，CSS代码，IE不兼容

时间：2015-04-03 09:33:20 阅读：135 评论：0 收藏：0 [点我收藏+]

<html>
<head>
<title>带箭头阴影的提示框</title>
<style>
.wrap{position:relative;}
.bd{
background:#BDCEEF;width:301px;height:101px;margin:10px;position:relative;z-index:2;
box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
-webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.cor,.cor_s{
position:absolute;
z-index:2;
width:40px;
height:40px;
background:#BDCEEF;
left:30px;bottom:-20px;
transform: skewY(-45deg);
-o-transform: skewY(-45deg);
-webkit-transform: skewY(-45deg);
-moz-transform: skewY(-45deg);
}
.cor_s{
z-index:1;
box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
-webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class=‘wrap‘>
<div class=‘bd‘></div>
<div class="cor"></div>
<div class="cor_s"></div>
</div>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>

标签：带箭头阴影的提示框 css代码 ie不兼容

原文地址：http://blog.csdn.net/life66881/article/details/44835969

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行