Wie mache ich Schatten auf der Grenze?

Question

Ich muss den Rand Schatten am Rand-unten von CSS3 anwenden. Ich möchte nur CSS3 Schatten unten anwenden. Ist das möglich?

Answer 1

versuchen, einen leichten Schatten auf den Seiten sein:

div{ 
 
-webkit-box-shadow:0px 1px 1px #de1dde; 
 
-moz-box-shadow:0px 1px 1px #de1dde; 
 
box-shadow:0px 1px 1px #de1dde; 
 
    }

<div>wefwefwef</div>

Es fügt im Allgemeinen einen 1px verschwommen Schatten 1px von der Unterseite der Box

box-shadow: [horizontal offset] [vertical offset] [blur radius] [color]; 

Answer 2

Verwenden Sie box-shadow ohne horizontalen Offset.

http://www.css3.info/preview/box-shadow/

zB.

div { 
 
    -webkit-box-shadow: 0 10px 5px #888888; 
 
    -moz-box-shadow: 0 10px 5px #888888; 
 
    box-shadow: 0 10px 5px #888888; 
 
}

<div>wefwefwef</div>

Es wird mit einem großen Unschärferadius (5px in obigen Beispiel)

Answer 3

Die Frage Schatten ist die Seite des enthaltenden div herauskommen. Um dies zu vermeiden, muss der Unschärfewert dem absoluten Wert des Spread-Werts entsprechen.

div { 
 
    -webkit-box-shadow: 0 4px 6px -6px #222; 
 
    -moz-box-shadow: 0 4px 6px -6px #222; 
 
    box-shadow: 0 4px 6px -6px #222; 
 
}

<div>wefwefwef</div>

in der Tiefe bedeckt here

Answer 4

Neue Methode für eine alte Frage

Es scheint, wie in den Antworten zur Verfügung gestellt die Frage war immer, wie das Box-Rahmen wäre entweder links und rechts vom Objekt sichtbar oder Sie müssten es so weit einfügen, dass es nicht die gesamte Länge des Containers korrekt abdeckt.

In diesem Beispiel wird das :after Pseudoelement zusammen mit einem linearen Farbverlauf mit Transparenz verwendet, um einen Schlagschatten auf einen Container zu legen, der genau auf die Seiten des zu schattierenden Elements zeigt.

Bemerkenswert mit dieser Lösung ist, dass wenn Sie Padding auf das Element, das Sie Schatten löschen möchten, wird es nicht korrekt angezeigt. Dies liegt daran, dass das Pseudoelement after seinen Inhalt direkt nach dem inneren Inhalt der Elemente anfügt. Wenn Sie also Polsterung haben, wird der Schatten in der Box angezeigt. Dies kann behoben werden, indem das Auffüllen des äußeren Containers (wo der Schatten angewendet wird) und das Verwenden eines inneren Containers, in dem die erforderliche Auffüllung angewendet wird, eliminiert wird.

Beispiel mit Polsterung und Hintergrundfarbe auf der beschattete div:

Wenn Sie die Tiefe des Schattens zu ändern, einfach erhöhen den height Stil im after Pseudo-Elemente. Sie können die Farben in den linearen Verlaufstilen natürlich auch dunkler, heller oder veränderlicher gestalten.

body { 
 
    background: #eee; 
 
} 
 

 
.bottom-shadow { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
.bottom-shadow:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 8px; 
 
    background: transparent; 
 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */ 
 
} 
 

 
.bottom-shadow div { 
 
    padding: 18px; 
 
    background: #fff; 
 
}

<div class="bottom-shadow"> 
 
    <div> 
 
    Shadows, FTW! 
 
    </div> 
 
</div>