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

最新推荐文章于 2024-04-08 23:51:29 发布

weixin_30429201

最新推荐文章于 2024-04-08 23:51:29 发布

阅读量60

点赞数

原文链接：http://www.cnblogs.com/nianyuwen/p/3503290.html

版权

<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 class="drop-shadow">sadsadasd</div>
</body>
</html>

转载于:https://www.cnblogs.com/nianyuwen/p/3503290.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30429201

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个CSS3滤镜Drop-shadow阴影效果

<html><head><title>CSS3 Drop-shadow阴影</title><style type="text/css">.drop-shadow { width: 500px; height: 300px; position: relative; backgrou...
复制链接

扫一扫