Установите CSS3 box-shadow так, чтобы он не был сверху div

Question

У меня есть блок div с box-shadow, установленным вокруг него со следующим CSS:

-moz-box-shadow: 1px 1px 15px #415a68;
-webkit-box-shadow: 1px 1px 15px #415a68;
-khtml-box-shadow: 1px 1px 15px #415a68;
box-shadow: 1px 1px 15px #415a68;

Что я могу сделать, чтобы box-shadow применялась только к левому, правому и нижнему краю div?

Answer 1

Вы не можете сделать это с ОДИН div.

РЕДАКТИРОВАТЬ

box-shadow не позволяетправая и левая тени одновременно.

Есть хитрость, хотя ... продолжайте читать.

Правило принимает четыре значения:

1. определяет горизонтальное смещениетень.+ значение для правой тени и - значение для левой тени.
2. определяет вертикальное смещение.+ значение для нижней тени и - значение для верхней тени.
3. определяет расстояние размытия
4. определяет разброс

Это все верно.Однако после некоторых тестов я обнаружил, что вы можете layer shadows.

Все, что вам нужно сделать, это разделить значения запятой.

Таким образом, для левой, правойи нижнюю тень на один div, вы можете сделать это

box-shadow: -5px 5px 3px black, 5px 5px 3px black;

Пример: http://jsfiddle.net/jasongennaro/HWCzJ/1/

Answer 2

div div
{
    box-shadow: 1px 1px 15px #415a68;   
    height: 100px;
    width: 100px;
}
div
{
    overflow: hidden;
    padding: 10px;
    padding-top: 0;
}

<div>
  <div></div>
</div>

http://jsfiddle.net/5rbrB/ вот пример использования overflow: hidden; и padding-top: 0;