Как сделать так, чтобы тень падала через край div, не вставляя

Question

Это очень простая проблема, которую я не могу понять.

Я хочу, чтобы тень падала до конца дивана. Как это, он охватывает большую часть дна:

И вот код:

box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)

Мне нужно, чтобы тень прошла через обе стороны.

Спасибо

РЕДАКТИРОВАТЬ: я иду об этом неправильно? Должен ли я использовать какое-то другое свойство CSS?

Answer 1

Чтобы избежать верхней тени, добавьте вертикальное смещение и соответственно настройте другие параметры. Кроме того, установите расстояние разброса равным 0 или больше, и вы закроете горизонтальную границу.

Начните с этого:

box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49)

Если вы не покрыли всю горизонтальную границу, слегка увеличьте 4-е значение, пока оно не будет хорошо выглядеть. Отрегулируйте свое вертикальное смещение соответственно, а также при необходимости

Было бы полезно увидеть ваш html / css для самого окна.

Answer 2

Для этого есть решение с использованием дополнительного div, большего, чем оригинал, расположенного абсолютно. Смотрите рабочий пример здесь: http://jsfiddle.net/martinschaer/MHs5R/

<div class="container">
    <div class="content"></div>
    <div class="shadow"></div>
</div>

И де CSS:

.container{
    position: relative;
    background-color: #f0f0f0;
    padding: 20px;
}

.content{
    height: 200px;
    width: 200px;
    background-color: #fff;
}

.shadow{
    -webkit-box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    position: absolute;
    top: 20px; /* .container top padding */
    left: 13.5px; /* 20 - (15/2) = .container left padding - (shadow spread / 2) */
    width: 215px; /* .content width + shadow spread */
    height: 200px;
}​

Answer 3

Результат:

Демо на dabblet.com

CSS:

div {
    background-color: #FFF;
    border: 1px solid #888;
    width: 100px;
    height: 100px;
    box-shadow: 0px 10px 5px -2px #888 ;
}

Answer 4

Параметры box-shadow находятся в следующей последовательности:
смещение по горизонтали, смещение по вертикали, расстояние размытия, расстояние распространения тени, значение цвета

Я думаю, что вам нужно это box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.49)

Вот скрипка - http://jsfiddle.net/ashwyn/Cbqej/1/