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