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: 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 に答える
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 に答える