box-shadow页面立体效果

我们先看一下将要实现的效果
image.png
第一眼看到这种效果以为是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>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值