Heim > Artikel > Web-Frontend > DIV CSS3 Text-Shadow-Schriftart Shadow (Codebeispiel)
DIV CSS3 Text-Shadow-Schriftart Shadow (Codebeispiel)
- 云罗郡主nach vorne
- 2018-10-16 14:21:042333Durchsuche
Der Inhalt dieses Artikels handelt von DIV CSS3 Text-Shadow-Schriftart (Codebeispiel). Ich hoffe, dass er hilfreich ist Du.
1. CSS3-Wörter und Grammatik
Textschatten
2. Grammatikstruktur
p{text-shadow:5px 2px 6px #000;}
Stellen Sie den Schatteneffekt des Textes im p-Feld auf 5 Pixel von links und 2 Pixel von oben ein, um mit der Anzeige des Schatteneffekts zu beginnen. Gleichzeitig beträgt der Schattengrößenbereich 6 Pixel und die Schattenfarbe ist Schwarz (#000). ).
3. Beschreibung
Es gibt 4 Werte für den Textanzeige-Schatteneffekt. Der erste Wert stellt den Abstand von links zum Beginn der Anzeige des Schatteneffekts dar Links, um mit der Anzeige des Schatteneffekts zu beginnen, und der dritte Wert. Der erste Wert stellt die Größe des Schattenbereichs dar und der vierte Wert ist die Farbe des Schatteneffekts.
2. Fall
1. Fall-HTML-Code
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>字体阴影 在线演示 DIVCSS5</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!-- www.divcss5.com --> </head> <body> <div>我阴影文字</div> <div class="txt">文字阴影测试内容1</div> <div class="txt2">文字阴影测试内容2</div> </body> </html>
Der entsprechende CSS-Code:
.txt {text-shadow:5px 1px 6px #F93 }
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}
Das Obige ist die DIV-CSS3-Textschattenschrift Shadow (Codebeispiele) vollständige Einführung. Wenn Sie mehr über
CSS3-Video-Tutorials erfahren möchten, achten Sie bitte auf die chinesische PHP-Website.
Das obige ist der detaillierte Inhalt vonDIV CSS3 Text-Shadow-Schriftart Shadow (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!