CSS Schatten alle vier Seiten der div

Question

Ich möchte dies in CSS erreichen - nicht CSS3, wie ich es will von allen

dh einen div enthält Inhalt bg with shadows on all sides http://img831.imageshack.us/img831/5339/27900717.png

Browser unterstützt werden, mit dem Schatten auf jeder Seite. Der obere Bereich wird für die Navigation verwendet. Ich habe nach Tutorials gesucht, aber bisher ohne Erfolg. Hilfe!

Answer 1

Wie Ventus sagte, ist es nicht möglich, CSS-Schatten mit ie (nur ie9) zu verwenden. Aber Sie können shadowOn verwenden. Es ist ein großartiges jQuery-Plugin und sehr einfach zu benutzen. Damit haben Sie eine Cross-Browser-Kompatibilität.

Answer 2

Sie müssen mehrere Bilder erstellen. Eins für die linke Seite. Einer für das Recht. Eine für die Unterseite, usw. Und dann mehrere Divs und legen Sie den Hintergrund für jede von ihnen.

Answer 3

Sie können dies mit drei divs tun, sie alle unter der Annahme gleich sind (fest) Breite:

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

Answer 4

Alternativ können Sie ein großes Bild machen, und verwenden, die als Hintergrund für den gesamten Inhaltsbereich ; dann die Positionen und Größen der enthaltenen Elemente fest codieren.

Answer 5

CSS3pie ist ein Tool, mit dem Sie einige CSS3-Eigenschaften in IE verwenden können.

Was Sie versuchen, ist CSS3 in neueren Browsern ziemlich weit verbreitet und emuliert wirklich gut (und einfach) in IE mit der .htc-Datei, die Sie von dort herunterladen können.

Wie für das Markup, sehe ich nur 2 Elemente, mit dem oberen zum Beispiel, schwebte rechts. Sie müssten mit dem Z-Index spielen, um übermäßige Schatten zu verbergen. In dieser Website gibt es auch einen sehr ähnlichen Effekt, sollten Sie in der Lage sein, es für Ihre Bedürfnisse anzupassen.

Answer 6

Diese in allen Browsern funktionieren sollte:

 

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

Answer 7

Box Schatten funktioniert in allen mordern [IE> 8] Browser verwendet Dieser Code keine Bilder und funktioniert in allen Browsern in IE-Versionen unter 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); 

Box Schatten ab IE 9 unterstützt.

Answer 8

Die Antwort von Sekar geschrieben, eine wenig Bearbeitung benötigt,

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

diese doesnot Arbeit auf IE (Ich habe auf IE8).

Answer 9

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

Bedeutet 0 Pixel links, 0 Pixel rechts, 3px Unschärfe, 0 Pixel diffus, verwenden Sie eine etwas dunklere Farbe als die BGs.

Answer 10

Ich kann nicht dein Bild jetzt, sondern für alle Seiten Schatten Ich verwende den Code unten sehen:

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

Anstatt die 5px Ihre Größe verwenden.

Answer 11

Sie können den folgenden Code in das div einfügen, um Schatten auf allen vier Seiten zu entfernen.

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

Answer 12

Unter Zeile funktionierte für mich.Ich habe ein Bild mit den Abmessungen 600x600 verwendet.

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