Verwenden von Textschatten- und Elementschatteneffekten in CSS

Einführung in Textschatten

Verwenden Sie in CSS die Eigenschaft text-shadow um den Textschatten festzulegen. Diese Eigenschaft hat insgesamt 4 Attributwerte: horizontaler Schatten, vertikaler Schatten, (Klarheit oder Unschärfeabstand) und Schattenfarbe.
Beschreibung der Eigenschaftswerte text-shadow in der Textschattenpraxis: Der erste Wert dient zum Festlegen der horizontalen Bewegung des Schattens, der zweite Wert zum Festlegen der vertikalen Bewegung des Schattens, der dritte Wert zum Festlegen der Schattenunschärfedistanz und der vierte Wert zum Festlegen der Schattenfarbe.
text-shadow kann auf eine negative Zahl gesetzt werden.
Sie können mehrere Schatten für einen Text festlegen, indem Sie diese durch Kommas trennen.

Textschatten: 1px 2px 3px rot, 1px 2px 6px rebeccapurple;

Textschatten-Übung

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Textschatten</title>
  <Stil>  
    div{
      Schriftgröße: 60px;
      Farbe: seegrün;
      Textschatten: 1px 2px 3px rot;
    }
  </Stil>
</Kopf>

<Text>
   <div>Lächeln ist der ursprüngliche Glaube, komm schon. </div>
</body>

</html>

Einführung in Elemental Shadows

Verwenden Sie box-shadow Eigenschaft in CSS um einem Element einen Schatten zu verleihen.

box-shadow lautet wie folgt: Der erste Wert legt die horizontale Bewegung des Schattens fest, der zweite Wert die vertikale Bewegung, der dritte Wert die Schattenschärfe, der vierte Wert die Schattengröße, der fünfte Wert die Schattenfarbe und der sechste Wert die Schattenposition. Die Standardschattenposition ist außen, und inset legt den Schatten nach innen fest.
box-shadow kann auf eine negative Zahl gesetzt werden.
box-shadow kann mehrere Schatten festlegen, indem Sie diese durch Kommas trennen.

Elementare Schattenpraxis

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Element Schatten</title>
  <Stil>  
    div{
      Breite: 100px;
      Höhe: 100px;
      Rand: 2px durchgehend rot;
      Box-Shadow: 3px 6px 8px Dunkelblau, 4px 8px 6px Rebecca-Lila Einschub;
    }
  </Stil>
</Kopf>

<Text>
   <div>Lächeln ist der ursprüngliche Glaube, komm schon. </div>
</body>

</html>

Zusammenfassen

Oben habe ich Ihnen die Verwendung von Textschatten- und Elementschatteneffekten in CSS vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: Detaillierte Schritte zur Installation von rockerChat im Docker und zum Einrichten eines Chatrooms

>>: Fünf Verzögerungsmethoden für die MySQL-Zeitblindinjektion