我们先看一下将要实现的效果
第一眼看到这种效果以为是div堆叠出来的,翻开源码发里面主要用的是css的box-shadow
属性的方法
box-shadow
常规的使用方法如下
box-shadow: h-shadow v-shadow blur spread color
/*blur 模糊距离*/
/*spread 阴影的尺寸*/
很少有人在box-shadow
后面使用多个值,下面的代码便是实现上面效果的关键
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), ----①
0 8px 0 -3px #f6f6f6, ----②
0 9px 1px -3px rgba(0,0,0,0.2), ----③
0 16px 0 -6px #f6f6f6, ----④
0 17px 1px -6px rgba(0,0,0,0.2); ----⑤
这些阴影作用在一个单独的元素上,因为只做生成阴影用,我们可以利用css的:before
来优化代码
①的代码通过before添加的元素给主div一个底边框的效果,
②将阴影下移8px,阴影尺寸收缩3px,第一层立体效果,此时是没有底边框效果的
③给第一层阴影加一个底边框
④⑤的效果是同上,改变的只是阴影的位置
最终代码如下,由于box-shadow只支持IE9+,因此IE9+都是可以实现这种效果的
<style type="text/css">
#box-shadow {
width: 500px;
height: 200px;
border: 1px solid #ddd;
margin: 0 auto;
box-shadow: 0px 10px 20px 0 rgba(0,0,0,0.2) ;
position: relative;
}
#box-shadow:before{
content: "";
position: absolute;
height: 50px;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,0.2), 0 16px 0 -6px #f6f6f6, 0 17px 1px -6px rgba(0,0,0,0.2);
}
style>