Как сделать CSS3 boxshadow на 2 сторонах div?

Question

Пожалуйста, взгляните на этот простой код:

http://jsfiddle.net/kerp3/

Коробка имеет внутреннюю тень от всех четырех сторон. Мне нужно, чтобы тень от коробки появлялась только слева и снизу.

Как изменить этот код:

box-shadow: inset 0 0 9px 0 #000;

Answer 1

Помогает ли это, это должно работать в разных браузерах.

.shadow {

    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}

Вот оригинальный автор: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

Answer 2

Вы не можете применить тень только к определенным сторонам <div>, но вы можете отрегулировать смещения по осям X и Y так, чтобы тень была обрезана по сторонам, где вы этого не хотите.

Это дало мне эффект, который вы ищете в Safari:

box-shadow: 7px -7px 9px #000 inset;

Answer 3

Я собирался предложить использовать отрицательные значения, например, так:

div { width: 300px; height: 300px;
    /* Try this. */
    box-shadow: inset 4px -4px 7px -4px #000; 
}

Первые 4 пикселя сдвигают теневую рамку влево на 4 пикселя, скрывая то, что вы обычно видите справа, если бы вы оставилив 0.

Второе значение -4px толкает тень вертикально вниз, снова скрывая верхнюю тень.

Более высокое значение размытия 7px дает мне больше, чем мне нужно, но если я добавлюспред -4px, это дополнительное размытие будет обрезано.Оставляя только мягкий серый теневой край вместо жесткого черного, который вы обычно видите.

Смотрите мой пример здесь: http://jsfiddle.net/khalifah/vVUB5/

Answer 4

С небольшим изменением цвета и смещений это становится довольно простым:

div { width: 300px; height: 300px; 

   box-shadow: inset 5px 5px 5px -3px #666;

}

jsFiddle .

Answer 5

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

Смотрите эту страницу: http://css -tricks.com / сниппеты / CSS / CSS-коробчатого тень /