Wie erreicht man mit CSS einen inneren Textschatten?

Erzielen eines inneren Textschattens mit CSS

Das Erstellen eines Textschatteneffekts innerhalb des Textes kann in CSS eine herausfordernde Aufgabe sein. Während die Box-Shadow-Eigenschaft das Rendern von Schatten innerhalb des Elements ermöglicht, erstreckt sich diese Fähigkeit nicht auf Text.

Ein cleverer Trick mit den Pseudoelementen :before und :after kann diese Einschränkung jedoch umgehen. Indem Sie das Titelattribut des Textelements auf den gewünschten Inhalt setzen und diese Pseudoelemente verwenden, können Sie die Illusion eines inneren Textschattens erzeugen.

Um diesen Effekt zu erzielen, definieren Sie :before- und :after-Elemente mit Der Inhalt wird aus dem Titelattribut übernommen. Positionieren Sie sie absolut innerhalb des Textelements, leicht versetzt zum Originaltext, um den Schatteneffekt zu erzeugen. Gestalten Sie sie mit einer transparenten schwarzen Farbe und Deckkraft, z. B. rgba(255, 255, 255, .1), um sie subtil mit dem Hintergrund zu verschmelzen.

Hier ist ein Beispiel-Codeausschnitt, der diese Technik demonstriert:

<code class="css">.depth {
  position: relative;
  padding: 50px;
  font: bold 7em Arial, sans-serif;
  color: black;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}</code>

<code class="html"><h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1></code>

Mit dieser Technik können Sie einen inneren Textschatteneffekt erzielen, der optisch dem von Ihnen bereitgestellten Beispiel ähnelt, ohne dass Photoshop oder umfangreiche Bildbearbeitung erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS einen inneren Textschatten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!