Heim > Artikel > Web-Frontend > So erzielen Sie einen Schatteneffekt in CSS
So erzielen Sie einen Schatteneffekt in CSS: 1. Verwenden Sie das Attribut „text-shadow“, um schattierten Text festzulegen, um einen Textschatteneffekt zu erzielen. 2. Verwenden Sie das Attribut „box-shadow“, um Schatten auf das Textfeld anzuwenden, um einen Randschatteneffekt zu erzielen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Methode 1: Verwenden Sie das Textschatten-Attribut, um einen Textschatteneffekt zu erzielen.
Das Textschatten-Attribut wird verwendet, um den Text mit Schatten zu versehen. Sie können auch die Pixellänge, die Breite und den Unschärfeabstand des Schattens festlegen als die Farbe des Schattens.
Beispiel:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css设置文本阴影效果</title> <style> h1 { color: red; text-shadow: 3px 5px 5px #656B79; } </style> </head> <body> <h1>文本阴影!</h1> </body> </html>
Methode 2: Verwenden Sie das Box-Shadow-Attribut, um den Randschatteneffekt zu erzielen
Das Box-Shadow-Attribut kann einen Schatten auf das Textfeld anwenden und die Pixellänge festlegen. Breite und Unschärfe des mittleren Schattenabstands sowie die Farbe des Schattens.
Beispiel:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css设置边框阴影效果</title> <style> div{ width:300px; height:100px; background-color:red; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div>边框阴影!</div> </body> </html>
Rendering:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Schatteneffekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!