0

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

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;
}
4

3 回答 3

1

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

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 投影）

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

于 2012-08-28T21:37:14.293 回答
1

尝试这个：

box-shadow: 10px 0px 12px -5px #ffffff, -10px 0px 12px -5px #ffffff;
于 2012-08-28T21:15:37.330 回答
1

不是顶部有阴影，而是您将点差设置得如此之高，以至于您可以看到它：

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)

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

于 2012-08-28T21:27:24.590 回答