实现一个类似纸张堆叠的效果

效果图如下:

基本原理就是利用box-shadow。

一般想到的是写2个baox-shadow,但出来的效果不好看,会导致每张纸的分界线不清晰。所以写2个阴影不透明的box-shadow 加上 3个阴影透明的box-shadow(有3条边界线),总共5个。

另外box-shadow的第4个值为阴影大小,可以设为负值,表示阴影缩小,这样就能制造出逐渐变窄的效果。

代码如下:

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 2px -6px rgba(0, 0, 0, 0.2);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值