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

Я хочу достичь этого в CSS-не CSS3, поскольку я хочу, чтобы он поддерживался всеми браузерами bg с тенями со всех сторон http://img831.imageshack.us/img831/5339/27900717.png

ie div, содержащий контент, с тенями со всех сторон. Верхняя область будет использоваться для навигации. Я искал учебники, но до сих пор безрезультатно. Помогите!

10
box-shadow css html

12 ответов

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

1

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 и далее.

18

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)
        ";
    }
3

ответ, опубликованный 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).

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

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

1

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

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

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

1

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

0

вы можете сделать это с тремя дивами, предполагая, что они все одинаковы (фиксированная) ширина:

<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;
}
0

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

0

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

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

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

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