Question

为什么使用以下代码，我仍然无法摆脱顶部和底部的阴影。虽然阴影是“小”的，但它们仍然存在。

div#inner_container {
 width: 960px;
 margin: 0 auto;
 background-color: rgb(255, 255, 255);
 box-shadow:0 9px 0 0 transparent,
            0 -9px 0 0 transparent,
            12px 0 15px -4px rgba(255, 255, 255, 0.5),
           -12px 0 15px -4px rgba(255, 255, 255, 0.5);
 position: relative;
 z-index: 5000;
}

Answer 1

试试这个：

box-shadow: 10px 0px 12px -5px #ffffff, -10px 0px 12px -5px #ffffff;

Answer 2

并不是说顶部有一个投影，但是你设置的点差很高，它会流血到你可以看到的地方：

box-shadow: 0 0px 0px 0px transparent,
            0 0px 0px 0px transparent,
            12px 0 9px -10px rgba(255, 255, 255, 0.5),
            -12px 0 9px -10px rgba(255, 255, 255, 0.5)

试试这个。不过，我确信这可以进一步简化。它看起来不必要地复杂。

Answer 3

您可以添加顶部和底部阴影，这是将放置在流血阴影顶部的背景颜色：

box-shadow:
0 -5px 0px 0 black,
0 5px 0px 0 black,            
12px 0 15px -4px rgba(255, 255, 255, 0.5),
-12px 0 15px -4px rgba(255, 255, 255, 0.5);

或者您可以使用:before，:after（CSS Drop Shadow）

两个例子：http://codepen.io/anon/pen/jEkwJ

无法摆脱顶部和底部的阴影

3 个答案: