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:092345Durchsuche
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!
In Verbindung stehende Artikel
Mehr sehen- Wie erstelle ich ein Mehrfachauswahl-Dropdown mit Kontrollkästchenoptionen?
- Wie kann ich verhindern, dass die Navigationsleiste den Seiteninhalt in Bootstrap verdeckt?
- Wie steuere ich horizontale Bildlaufleisten in CSS-'div'-Elementen?
- Was ist der Unterschied zwischen „overflow-wrap“ und „word-break“ in CSS und wie wirken sie zusammen, um lange Links zu unterbrechen?
- Wie kann ich die Sichtbarkeit der Bildlaufleiste in CSS-Div-Elementen anpassen?