Не может избавиться от верхних и нижних теней

Почему с помощью следующего кода я все еще не могу избавиться от теней сверху и снизу. Хотя тени "маленькие", они все же есть.

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;
}
Источник

3 ответа

Решение

Попробуй это:

box-shadow: 10px 0px 12px -5px #ffffff, -10px 0px 12px -5px #ffffff;
Источник

Дело не в том, что сверху есть тень, а в том, что вы установили спред настолько высоко, что он начинает кровоточить так, что вы можете его увидеть:

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)

Попробуй это. Я уверен, что это может быть еще более упрощено, хотя. Это выглядит излишне сложным.

Источник

Вы можете добавить верхнюю и нижнюю тень, которая является цветом фона, который будет помещен поверх кровоточащей тени:

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

Источник
Другие вопросы по тегам