一个CSS3滤镜Drop-shadow阴影效果

时间：2015-06-01 13:21:28 阅读：125 评论：0 收藏：0 [点我收藏+]

<html>
<head>
<title>CSS3 Drop-shadow阴影</title>
<style type="text/css">
.drop-shadow {
width: 500px;
height: 300px;
position: relative;
background: #ccc;
}
.drop-shadow:before,
.drop-shadow:after {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
width: 30%;
height: 20%;
/*add box-shadow*/
-webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
-moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
box-shadow: 0 15px 10px rgba(125,125,125,0.8);
}
.drop-shadow:before{
left:5px;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.drop-shadow:after {
right:5px;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div class="drop-shadow"></div>
</body>
</html>

标签：一个css3滤镜drop-shadow阴

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

踩

(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)

周排行