Ombres CSS les quatre côtés de div

Vous devez créer plusieurs images. Un pour le côté gauche. Un pour la droite. Un pour le bas, etc., puis plusieurs Div et définir le fond de chacun d'eux.

Vous pouvez le faire avec trois divs, en supposant qu'ils sont tous identiques (fixes) largeur: xxx

Alternativement, vous pouvez faire une grosse image et utiliser cela comme arrière-plan pour la zone de contenu entière; puis codez-le-code les positions et tailles des éléments contenus.

CSS3PIE est un outil qui vous permet d'utiliser certaines propriétés CSS3 dans IE.

Qu'est-ce que vous essayez de faire est assez répandu CSS3 chez les navigateurs plus récents et que vous aimez vraiment bien (et facilement) dans IE avec le fichier .htc que vous pouvez télécharger à partir de là.

Quant au balisage, je ne vois que 2 éléments, avec le top 1 flotté, par exemple. Vous devriez jouer avec z-index pour masquer l'excès d'ombres. Sur ce site, il y a aussi un effet très similaire, vous devriez être capable de l'adapter à vos besoins.

Comme le dit Ventus n'est pas possible d'utiliser des ombres CSS avec IE (seulement IE9). Mais vous pouvez utiliser Shadowon . C'est un grand plugin JQuery et une utilisation très facile à utiliser. Avec cela, vous aurez une compatibilité croisée croisée.

Cela devrait fonctionner dans tous les navigateurs:

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

Box Shadow fonctionne dans tous les navigateurs modernes [IE> 8], ce code n'utilise aucune image et fonctionne dans tous les navigateurs dans les versions IE ci-dessous 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);

La réponse postée par Sekar a besoin d'un petit édition,

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

box-shadow: inset 0 0 3px 0 #000;
Means 0 pixel left, 0 pixel right, 3px blur, 0 pixel diffuse, use a color slightly darker than the BGs.

Je ne peux pas voir votre photo maintenant, mais pour toutes les ombres latérales, j'utilise le code ci-dessous:

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

Vous pouvez placer le code suivant dans la DIV afin de déposer des ombres sur les quatre côtés.

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