Effektivste Weg Box Schatten mit CSS zu bauen

Question

Ich bin interessiert zu erfahren, welche Art und Weise Kasten Schatten schafft mit CSS am effektivsten ist. Aber das meine ich: einfache Implementierung, Flexibilität und Cross-Browser-Kompatibilität.

Answer 1

Onion Skinning ist mein persönlicher Favorit.

Ein Beispiel kann in dieser gefunden werden alistapart Artikel .

Answer 2

Das ist jetzt sehr einfach zu erreichen:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

Erster Wert der horizontalen Versatz. Zweiter Wert ist vertikal versetzt. Dritter Wert wird von Unschärfe-Effekt zu verbreiten. Vierte Wert ist die Farbe.

Darüber hinaus können Sie einen anderen Wert von inset hinzufügen, die der Schatten auf der Innenseite erscheinen wird von Ihnen Element blockieren:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

Das ist jetzt sehr gut unterstützt: https://caniuse.com/#feat=css- boxshadow

Answer 3

So wie ich am effektivsten zur Zeit finden, ist dies:

Die CSS-Regeln erforderlich:

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

HTML-Code, auf dem die CSS angewendet wird:

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div>

ich es sehr einfach gefunden zu implementieren, flexibel und es funktioniert genauso auf FF 3, IE 6 und 7.