css3实现阴影

最新推荐文章于 2024-06-21 11:27:52 发布

GJM_大萌

最新推荐文章于 2024-06-21 11:27:52 发布

阅读量375

点赞数

最近在学习html与css3基础，看到有一节课用css3实现曲线阴影与翘边阴影，便将这个做了出来。基本代码实现如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css3实现曲线与翘边阴影</title>
<style>
ul,li{
list-style:none;
margin:0;
padding:0;
}

.wrap{
width:700px;
height:200px;
margin:50px auto;
background:#fff;
}

.wrap h1{
font-size:24px;
text-align:center;
line-height:200px;
}

.effect{
box-shadow:0px 1px 4px rgba(0,0,0,0.8),0px 0px 40px rgba(0,0,0,0.1) inset;/*外、内阴影*/
position:relative;/*给其定位，让阴影重叠*/
}

.effect:before,.effect:after{/*背面设置两个盒子，使阴影更为深*/
content:"";
position:absolute;/*给其定位，让阴影重叠*/
z-index:-1;/*在盒子的后面*/
background:#fff;
top:50%;/*设置其距离父盒子位置所在*/
bottom:0;/*四个方向的值必须全部设置*/
left:10px;
right:10px;
border-radius:100px/10px;/*水平/垂直方向的半径*/
box-shadow:0 0px 20px rgba(0,0,0,0.8);
/*下面的盒子的外阴影*/
}

.box{width:980px;
height:auto;
overflow:hidden;
clear:both;
margin:0 auto;
}

.box li{width:300px;
height:220px;
margin:20px 10px;
float:left;
border:2px solid #efefef;/*显示边框，相框*/
background:#fff;
position:relative;
text-align:center;
line-height:220px;
font-size:30px;
box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
/*给照片的框添加阴影，为直角阴影*/
}

.box li:before{
content:'';
position:absolute;
z-index:-1;
background:transparent;/*透明*/
width:90%;
height:80%;
left:20px;
bottom:8px;
transform:skew(-12deg) rotate(-4deg);/*旋转倾斜*/
box-shadow:0 8px 20px rgba(0,0,0,0.6)/*设置阴影效果*/
}

.box li:after{
content:'';
position:absolute;
z-index:-1;
background:transparent;
width:90%;
height:80%;
right:20px;
bottom:8px;
transform:skew(12deg) rotate(4deg); /*向右斜切*/
box-shadow:0 8px 20px rgba(0,0,0,0.6)
}
.box li img{display:block;
width:290px;
height:210px;
margin:5px;
}
</style>
</head>
<body>
<div class="wrap effect">
<h1>Shadow Effect</h1>
</div>
<ul class="box">
<li><img src="images/photo1.jpg"/></li>
<li><img src="images/photo2.jpg"/></li>
<li><img src="images/photo3.jpg"/></li>
</ul>
</body>
</html>