2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

CSS3实现“图片阴影”效果_d3.js box-shadow

作者：2023面试高手 | 2024-03-18 23:01:06

踩

d3.js box-shadow

CSS3实现“图片阴影”效果

<!DOCTYPE html>

<html>

<head>

<title>box-shadow</title>

body{font-family:Arial;

font-size:23px;}

.wrap h3{

text-align:center;

position:relative;

top:80px;

}

.wrap {

width:70%;

height:200px;

background:#FFF;

margin:40px auto;

}

.effect{

position:relative;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0,0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0,0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4pxrgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;

}

.effect:before, .effect:after{

content:"";

position:absolute;

z-index:-1;

-webkit-box-shadow:00 20px rgba(0,0,0,0.8);

-moz-box-shadow:00 20px rgba(0,0,0,0.8);

box-shadow:00 20px rgba(0,0,0,0.8);

width:90%;

height:50%;

bottom:0;

left:5%;

-moz-border-radius:100px/ 10px;

border-radius:100px/ 10px;

}

ul.box {

width:980px;

height:auto;

margin:20px auto;

padding:0;

clear:both;

overflow:hidden;

}

ul.box li {

list-style-type:none;

margin:20px10px;

padding:0;

width:300px;

height:220px;

border:2px solid #efefef;

position:relative;

float:left;

background:#ffffff; /* old browsers */

line-height:220px;

font-size:32px;

text-align:center;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

-o-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

}

ul.box li:before {

z-index: -2;

position:absolute;

background:transparent;

width:90%;

height:80%;

content:'';

left:20px;

bottom:8px;

-webkit-transform: skew(-12deg) rotate(-4deg);

-moz-transform:skew(-12deg)rotate(-4deg);

-o-transform:skew(-12deg) rotate(-4deg);

-ms-transform:skew(-12deg) rotate(-4deg);

-webkit-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

-moz-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

-o-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

}

ul.box li:after {

z-index:-1;

position:absolute;

background:transparent;

width:90%;

height:80%;

content:'';

right:20px;

bottom:8px;

-webkit-transform:skew(12deg) rotate(4deg);

-moz-transform:skew(12deg)rotate(4deg);

-o-transform:skew(12deg) rotate(4deg);

-ms-transform:skew(12deg) rotate(4deg);

-webkit-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

-moz-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

-o-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

box-shadow:0 8px 16px rgba(0, 0, 0, 0.6);

}

.box li img{

width:290px;

height:210px;

padding:5px;

}

</style>

</head>

<body>

<h3>Shadow Effect</h3>

</div>

</ul>

</body>

</html>

效果图预览：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/266063