CSS Тени все четыре стороны div

Ответ 1

Как сказал Вентус, невозможно использовать тени css с ie (only ie9). Но вы можете использовать shadowOn. Это отличный плагин jquery и очень простой в использовании. С его помощью вы будете иметь совместимость с браузером.

Ответ 2

Box Shadow работает во всех mordern [IE > 8] браузерах. Этот код не использует изображения и работает во всех браузерах в версиях IE ниже 9.

 box-shadow:2px 2px 10px 10px #C9C9C9;
 -webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
 -moz-box-shadow:2px 2px 10px 10px #C9C9C9;

  /* For IE<9 */  
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);

Тень ящика, поддерживаемая IE 9 и далее.

Ответ 3

CSS3pie - это инструмент, который позволяет использовать некоторые свойства css3 в IE.

То, что вы пытаетесь сделать, является довольно распространенным css3 в новых браузерах и эмулируется очень хорошо (и легко) в IE с файлом .htc, который вы можете скачать оттуда.

Что касается разметки, я вижу только 2 элемента, например, верхнюю часть, расположенную справа. Вам нужно будет играть с z-index, чтобы скрыть лишние тени. На этом сайте также очень похожий эффект, вы должны быть в состоянии адаптировать его для своих нужд.

Ответ 4

Это должно работать во всех браузерах:

    .allSidesShadow {
        box-shadow: 2px 2px 19px #aaa;
        -o-box-shadow: 2px 2px 19px #aaa;
        -webkit-box-shadow: 2px 2px 19px #aaa;
        -moz-box-shadow: 2px 2px 19px #aaa;

        /* For IE 5.5 - 7 */
        /* for IE4 - IE7 */
        filter:
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4);
        -ms-filter: "
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4)
        ";
    }

Ответ 5

Ответ, отправленный Sekar, нуждается в небольшом редактировании,

box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;

это не работает в IE (я проверил IE8).

Ответ 6

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

Означает 0 пикселей влево, 0 пикселей вправо, размытие 3px, рассеяние на 0 пикселов, использование цвета немного темнее, чем у BG.

Ответ 7

Я не могу видеть вашу фотографию сейчас, но для всех сторонних теней я использую приведенный ниже код:

box-shadow: 0 0 5px 0 #000;

Вместо 5px используйте свой размер.

Ответ 8

Вам нужно создать несколько изображений. Один для левой стороны. Один справа. Один для дна и т.д. Затем добавьте несколько div и установите фон для каждого из них.

Ответ 9

Вы можете сделать это с тремя div, если они все одинаковы (фиксированная):

<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>

.top{
  background:url('top.png');
  height:20px;
  width:800px;
}
.middle{
  background:url('middle.png') repeat-y;
  width:800px;
  }
.bottom{
  background:url('bottom.png');
  height:20px;
  width:800px;
}

Ответ 10

В качестве альтернативы вы можете сделать одно большое изображение и использовать его в качестве фона для всей области содержимого; затем жестко закодируйте позиции и размеры содержащихся элементов.

Ответ 11

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

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);    

Ответ 12

Ниже меня работала. Я использовал изображение размером 600х600.

-webkit-filter: drop-shadow(-10px 8px 30px #000) !important;