Wie erstelle ich einen Schlagschatten nur auf einer Seite eines Elements?

Gibt es eine Möglichkeit, den Schatten nur auf den Boden fallen zu lassen? Ich habe ein Menü mit 2 Bildern nebeneinander. Ich möchte keinen richtigen Schatten, weil er das richtige Bild überlappt. Ich verwende dafür keine Bilder, daher gibt es eine Möglichkeit, sie nur unten abzulegen:

box-shadow-bottom: 10px #FFF; o.ä?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

UPDATE 4

Wie Update 3, jedoch mit modernem CSS (= weniger Regeln), sodass keine spezielle Positionierung auf dem Pseudoelement erforderlich ist.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

UPDATE 3

Alle meine vorherigen Antworten haben zusätzliches Markup verwendet, um diesen Effekt zu erzielen, der nicht unbedingt benötigt wird. Ich denke, dies ist eine viel sauberere Lösung ... der einzige Trick besteht darin, mit den Werten herumzuspielen, um die richtige Positionierung des Schattens sowie die richtige Stärke / Opazität des Schattens zu erhalten. Hier ist eine neue Geige, die Pseudoelemente verwendet :

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

<div id="box" class="box-shadow"></div>

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

UPDATE 2

Anscheinend können Sie dies mit nur einem zusätzlichen Parameter für das Box-Shadow-CSS tun, wie alle anderen gerade betont haben. Hier ist die Demo:

http://jsfiddle.net/K88H9/821/

CSS

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

Dies wäre eine bessere Lösung. Der zusätzliche Parameter, der hinzugefügt wird, wird wie folgt beschrieben:

Die vierte Länge ist eine Ausbreitungsstrecke. Positive Werte bewirken, dass sich die Schattenform um den angegebenen Radius in alle Richtungen ausdehnt. Negative Werte bewirken, dass sich die Schattenform zusammenzieht.

AKTUALISIEREN

Schauen Sie sich die Demo unter jsFiddle an: http://jsfiddle.net/K88H9/4/

Ich habe ein "Schattenelement" erstellt, das sich hinter dem eigentlichen Element verbirgt, für das Sie einen Schatten haben möchten. Ich habe die Breite des "Schattenelements" um das Zweifache des von Ihnen angegebenen Schattens genau so breit gemacht wie das eigentliche Element. dann habe ich es richtig ausgerichtet.

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

Ursprüngliche Antwort

Ja, Sie können dies mit derselben Syntax tun, die Sie angegeben haben. Der erste Wert steuert die horizontale Positionierung und der zweite Wert steuert die vertikale Positionierung. Stellen Sie also einfach den ersten Wert 0pxund den zweiten auf den gewünschten Versatz wie folgt ein:

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

Weitere Informationen zu Boxschatten finden Sie in den folgenden Abschnitten:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

Ich hoffe das hilft.

Verwenden Sie einfach den Spread-Parameter, um den Schatten kleiner zu machen:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

Live-Demo: http://dabblet.com/gist/a8f8ba527f5cff607327

Um keinen Schatten an den Seiten zu sehen, muss der (absolute Wert des) Ausbreitungsradius (4. Parameter) mit dem Unschärferadius (3. Parameter) übereinstimmen.

Wenn Sie eine feste Farbe auf dem Hintergrund haben, können Sie den Seitenschatteneffekt mit zwei Maskierungsschatten ausblenden , die dieselbe Hintergrundfarbe und Unschärfe = 0 haben. Beispiel:

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

Beachten Sie, dass der schwarze Schatten der letzte sein muss und eine negative Streuung (-3px) aufweist, um zu verhindern, dass er sich über die Ecken hinaus erstreckt.

Hier die Geige (ändern Sie die Farbe der Maskierungsschatten, um zu sehen, wie es wirklich funktioniert).

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

Ich denke, das ist es, wonach du suchst?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

Es ist immer besser, die technischen Daten zu lesen . Es gibt keine box-shadow-bottomEigenschaft, und wie Lea betont, sollten Sie die Eigenschaft ohne Präfix immer unten nach den Präfixen platzieren.

So ist es:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

Wie wäre es einfach mit einem enthaltenden Div, dessen Überlauf auf "Ausgeblendet" und etwas Polsterung unten eingestellt ist? Dies scheint die einfachste Lösung zu sein.

Es tut mir leid zu sagen, dass ich selbst nicht daran gedacht habe, sondern es woanders gesehen habe .

Verwenden eines Elements zum Umschließen des Elements mit dem Box-Schatten und einem Überlauf: Auf dem Wrapper können Sie den zusätzlichen Box-Schatten verschwinden lassen und dennoch einen verwendbaren Rand haben. Dies behebt auch das Problem, bei dem das Element aufgrund der Streuung kleiner ist, als es scheint.

So was:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

Inhalt geht hier

Immer noch eine clevere Lösung, wenn es in reinem CSS gemacht werden muss!

Wie von Jorgen Evens gesagt .

Sie können auch clip-pathalle überlaufenden Kanten ausschneiden (ausblenden), außer die, die Sie anzeigen möchten:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

Siehe Clip-Pfad (MDN) . Die Argumente dafür polygonsind der Punkt oben links , der Punkt oben rechts , der Punkt unten rechts und der Punkt unten links . Indem Sie die Unterkante auf 200%(oder eine beliebige Zahl größer als 100%) einstellen , beschränken Sie Ihren Überlauf nur auf die Unterkante.

Ich brauchte auch einen Schatten, aber nur unter einem Bild und setzte leicht links und rechts ein. Das hat bei mir funktioniert:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

Das Element, auf das dies angewendet wird, ist ein seitenweites Bild (980 x 300 Pixel).

Wenn es beim Herumspielen an den Einstellungen hilft, werden sie wie folgt ausgeführt:

horizontaler Schatten, vertikaler Schatten, Unschärfeabstand, Streuung (dh Schattengröße) und Farbe.

Es ist besser, Schatten nachzuschlagen:

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

Dieser Code wird derzeit im Stackoverflow-Web verwendet.

Dieser Codestift (nicht von mir) zeigt eine supereinfache Möglichkeit, dies und die anderen Seiten für sich zu tun:

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

https://codepen.io/zeckdude/pen/oxywmm

Wenn Ihr Hintergrund fest ist (oder Sie ihn mit CSS reproduzieren können), können Sie den linearen Farbverlauf folgendermaßen verwenden:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

Dadurch wird am unteren Rand des Elements ein Farbverlauf von 5 Pixel erzeugt, von Schwarz bei 30% Deckkraft bis vollständig transparent. Der Rest des Elements hat einen weißen Hintergrund. Wenn Sie die letzten beiden Farbstopps des linearen Verlaufs ändern, können Sie den Hintergrund natürlich vollständig transparent machen.

Sie können auch einfach einen Farbverlauf auf der Unterseite erstellen - dies war hilfreich für mich, da sich der gewünschte Schatten auf einem Element befand, das bereits halbtransparent war, sodass ich mir keine Gedanken über Ausschnitte machen musste:

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

Passen Sie einfach die Eigenschaften "unten" und "Höhe" an und stellen Sie Ihre rgba-Werte so ein, wie Sie möchten, dass sie sich oben / unten im Schatten befinden

Sie können das so machen:

Allgemeine Syntax:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

Beispiel: Wir wollen nur einen unteren Kastenschatten mit roter Farbe machen.

Um dies zu tun, müssen wir alle Seitenoptionen festlegen, wobei wir die Schattenoptionen des unteren Felds festlegen müssen, und alle anderen so leer wie folgt festlegen:

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

Aktualisieren Sie auf jemand anderem seine Antwort transparente Seiten anstelle von Weiß, damit es auch auf anderen Farbhintergründen funktioniert.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

inneren Schatten

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>