Startseite>Webdesign-Tutorial>Web-Spezialeffekte

Tutorial zur Verwendung der CSS3-Eigenschaft box-shadow

Autor：Eve Cole Aktualisierungszeit：2010-05-14 17:29:27

Mit der Box-Shadow-Eigenschaft von CSS3 können wir auf einfache Weise Ebenenschatteneffekte erzielen. Lassen Sie uns dieses Attribut in der Praxis im Detail erklären.

1. Browserkompatibilität des Box-Shadow-Attributs

Schauen wir uns zunächst die Browserkompatibilität dieses Attributs an:

  • Opera: Ich weiß nicht, welche Version unterstützt wird. Als ich diesen Artikel zum Testen gepostet habe, habe ich Opera gerade auf die neueste Version 10.53 aktualisiert, die das Box-Shadow-Attribut bereits unterstützt.
  • Firefox unterstützt dies durch die private Eigenschaft -moz-box-shadow .
  • Safari und Chrome unterstützen dies über die private Eigenschaft -webkit-box-shadow .
  • Wird nicht von allen IEs unterstützt (ich weiß nicht, ob sich IE9 verbessert hat). Keine Sorge, wir werden am Ende des Artikels einige Hacks für den IE vorstellen.

2. Syntax des Box-Shadow-Attributs

box-shadow hat sechs einstellbare Werte:

img{box-shadow: Schattentyp X-Achsen-Verschiebung Y-Achsen-Verschiebung Schattengröße Schattenerweiterung Schattenfarbe}

  • Wenn kein Schattentyp festgelegt ist, ist der Standardwert der Schatteneffekt. Bei der Einstellung „Inset“ handelt es sich um einen inneren Schatteneffekt.
  • X-Achsen- und Y-Achsen-Verschiebung sind nicht gleichwertig, ähneln aber „Winkel“ und „Position“ in Photoshop.
  • Schattengröße, -erweiterung und -farbe sind die gleichen wie in Photoshop.

    3. Beispielanalyse

    Schauen wir uns die Wirkung eines Box-Shadows anhand mehrerer Beispiele an. Erstellen Sie zunächst einen einfachen HTML-Code zum Testen:

    <html>
    <Kopf>
    <style type="text/css">Schreiben Sie hier den CSS-Teil</style>
    </head>
    <Körper>
    <img src="test.jpg" />
    </body>
    </html>

    Bitte beachten Sie : Um Ärger zu vermeiden, wird im folgenden CSS-Code nur box-shadow geschrieben. Bei der tatsächlichen Verwendung sollten Sie auch -moz-box-shadow und -webkit-shadow schreiben. Was Sie tun müssen, ist ganz einfach: Kopieren Sie zwei Box-Shadows und fügen Sie -moz- und -webkit- davor ein.

    img {
    -moz-box-shadow:2px 2px 10px #06C;
    -webkit-box-shadow:2px 2px 10px #06C;
    box-shadow:2px 2px 10px #06C;
    }
Ähnliche Artikel