無法擺脫頂部和底部的陰影

爲什麼使用下面的代碼，我仍然無法擺脫頂部和底部的陰影。雖然陰影「小」，但他們仍然在那裏。無法擺脫頂部和底部的陰影

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

無法擺脫頂部和底部的陰影

回答

相關問題