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

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

2014-07-08 11:56 381 查看
一款CSS3滤镜Drop-shadow阴影效果的实现，运行后能看到在网页的下部左右两边各有一个斜着的阴影区域，不是水平或垂直的阴影，这种似乎更难以用CSS3来实现，所以说本代码有一定参考价值。测试请用火狐或chrome等浏览器，IE下看不到效果。

<html>
<head>
<title>上谷战国红</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 class="drop-shadow"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航