html - 顶部和底部的盒子阴影

Question

我有以下附有效果的框阴影。现在元素的顶部有框阴影效果(见附件)，但底部没有同样的效果。

我怎样才能使元素的底部看起来与元素的顶部完全一样。 (图片见附件)

box-shadow: 0px 0px 60px -18px #CACACA;

Answer 1

这是应用于 500 像素 x 200 像素的 DIV 的阴影设置:

http://codepen.io/anon/pen/aNxWgE

如果(在该代码笔中)您将 margin: 100px auto; 更改为 margin: 0 auto;，您将不会再看到顶部阴影。如果您删除 width(从而使 DIV 100% 宽)，您将不会再看到侧边阴影。所以你的底部阴影可能会发生类似的事情。

为避免这种情况，请使用至少与阴影一样宽的边距。