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

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

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

来源

2012-08-28 Jawad

你能发布更多的代码吗？我添加了你需要的东西，但看不到你正在谈论的阴影：http://jsfiddle.net/9eJnG/ – ews2001

@ ews2001：奇怪。看着你的小提琴，它不会发生，但在这里“http://www.pufs.org/test/cattle.html”它发生。 – Jawad

试试这个：

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

来源

2012-08-28 21:15:37 ews2001

试过。但在现场，它的顶部和底部仍然有一些小阴影。盒子阴影是否继承？ – Jawad

这并不是说有在顶部的阴影，但您所设置的传播如此之高了，正在流血的地步，你可以看到它：

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-28 21:27:24

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

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

来源

2012-08-28 21:37:14 Raik

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

回答

相关问题