Heim > Artikel > Web-Frontend > Beispiel für die Implementierung eines Schatteneffekts mithilfe von CSS3
Beispiel für die Implementierung eines Schatteneffekts mithilfe von CSS3
- 小云云Original
- 2017-11-20 17:14:092367Durchsuche
CSS3 ist eine aktualisierte Version der CSS-Technologie, und die CSS3-Sprachentwicklung entwickelt sich in Richtung Modularität. Die bisherige Spezifikation war als Modul zu groß und komplex, daher wurde sie in kleinere Module zerlegt und weitere neue Module hinzugefügt. Zu diesen Modulen gehören: Boxmodell, Listenmodul, Hyperlink-Methode, Sprachmodul, Hintergrund und Rahmen, Texteffekte, mehrspaltiges Layout usw. In diesem Kapitel stellen wir Ihnen ein einfaches Beispiel für einen CSS3-Schatteneffekt vor. Sie können die Schatteneigenschaft von CSS3 verwenden, um Elementen einer Webseite einen Schatteneffekt hinzuzufügen. Diese Funktion funktioniert jedoch nur in Browsern, die CSS3 unterstützen, wie Firefox 3.5, Safari 3.1+ und Google Chrome.
Lassen Sie uns darüber sprechen, wie Sie das Schattenattribut von CSS3 verwenden.
CSS3-Schatten verwendet hauptsächlich das Box-Shadow-Attribut:
Box-Shadow: a81a545e841c8590c893e65526541e66 color>
Die oben genannten Attributwerte haben die folgende Bedeutung:
horizontal (horizontal): Geben Sie den horizontalen Offset-Schatten an. Positive Werte (z. B. 5 Pixel) verschieben den Schatten nach rechts, während negative Werte (z. B. - 10 Pixel) ihn nach links verschieben.
vertikal: Gibt einen vertikalen Offset-Schatten an. Positive Werte (z. B. - 5 Pixel) bewirken, dass der Schatten am unteren Rand des Felds liegt, während negative Werte (z. B. - 10 Pixel) ihn nach oben verschieben.
Unschärfe: Stellen Sie den Weichzeichnungsradius ein. Der Standardwert ist 0, was bedeutet, dass keine Unschärfe auftritt. Positive Werte erhöhen die Unschärfe, während negative Werte die Schatten tatsächlich verkleinern. Der Standardwert dieser Eigenschaft ist 0.
clolor (Farbe): Farbwert, der die Schattenfarbe festlegt.
Erinnerung: Dieses Attribut kann jedem Element hinzugefügt werden, z. B. Bildern, Div-, SPAN-, P-Tags usw.
Sehen wir uns ein konkretes Schattenbeispiel an:
<html xmlns="http://www.phpernote.com/">
<head>
<title>CSS3阴影效果实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#shadow {
box-shadow: 10px 10px 5px #888888;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
margin:0 auto;
color:#ffffff;
}
</style>
</head>
<body>
<div id="shadow">矩形的 CSS3 的阴影</div>
</body>
</html>Das Obige ist ein einfaches Tutorial zu CSS3, ich hoffe, es kann helfen alle.
Verwandte Empfehlungen:
Tipps zum Zeichnen verschiedener grundlegender Grafiken mit CSS3
Detaillierte Beispiele für benutzerdefinierte CSS3-Bildlaufleistenstile
Implementierung der kreisförmigen Bewegungsbahn in der CSS3-Animation
Das obige ist der detaillierte Inhalt vonBeispiel für die Implementierung eines Schatteneffekts mithilfe von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!