几个月以后,我会看这篇文章时,发现当时思路有点二,貌似一个阴影就可以啊,查看本文请慎重。
本文介绍box-shadow实现三周阴影(左右下)及四周阴影的实现代码和思路。
大家都知道box-shadow这货实现右、下两边非常简单,box-shadow: 5px 5px 5px #ccc;
就可以了对吧。但是左面怎么办,上面怎么办。
三边阴影(左右下)
用两个div实现:主阴影(container)负责右下,辅阴影(container-shadow)负责左边。主阴影在外,辅阴影在内。
<div class="container"> <div class="container-shadow"> ....... </div> </div>
.container { box-shadow: 5px 5px 5px #ccc; } .container-shadow { box-shadow: -5px 0px 5px #ccc; }
四边阴影(左右上下)
同三边同理,css改为:
.container { box-shadow: 5px 5px 5px #ccc; } .container-shadow { box-shadow: -5px -5px 5px #ccc; }
这时候你会发现,有瑕疵。右上角缺一块,实际左下角也缺,但是左下角属于死角,不明显。但是右上角真是很明显。此时,你想一下,这个缺陷能否接受,能的话就别继续折腾了。不能的话,再套个div在里面,名为:container-shadow-patch
。
<div class="container"> <div class="container-shadow"> <div class="container-shadow-patch"> ....... </div> </div> </div>
CSS改为:
.container { box-shadow: 5px 5px 5px #ccc; } .container-shadow { box-shadow: -5px 0px 5px #ccc; } .container-shadow-patch { box-shadow: 5px -5px 5px #e4e3e3; }
如此修正之后,右上角的问题就解决了。注意第八行为什么颜色不是ccc了,是因为里面套进去这个阴影,和原来的重叠,会加深,所以这个阴影淡一点就可以了。骗过眼睛没有问题。
至此,基本算完美。唯一算的上缺陷的是左下角,强迫症就自己再套一层解决吧。
附加问题
如果要加边框的话,就要给最里面的div加才好用。