box-shadow三周阴影、四周阴影的实现代码

几个月以后,我会看这篇文章时,发现当时思路有点二,貌似一个阴影就可以啊,查看本文请慎重。

本文介绍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加才好用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注