Textstyling ist ein wichtiger Faktor, der zur Verbesserung der Website -Elemente verwendet wird. Es enthält verschiedene HTML -Elemente wie Links, Bilder und Schaltflächen, die synchronisiert und konsistent sein müssen. Auch, CSS kann sicherstellen, dass der hinzugefügte Text auf einer Webseite gut synchronisiert ist. Zu diesem Zweck können mehrere Textmerkmale verwendet werden, einschließlich Textgröße, Schriftfarbe, Textausrichtung und Schriftfarbe. “Textschatten”Ist auch in der Liste dieser fantastischen Eigenschaften enthalten.

In diesem Artikel werden die erörtert Text-Shadow-Eigenschaft und seine damit verbundenen Optionen mit Hilfe geeigneter Beispiele.

Text-Shadow-Eigenschaft in CSS

In CSS können Sie das verwenden “Textschatten”Eigentum für Schatten hinzufügen zum Html Text Elemente. Es umfasst verschiedene Arten von Schatten, die mit internen, externen oder Inline -CSS angewendet werden können.

Die Syntax der Text-Shadow-Eigenschaft in CSS ist unten angegeben.

Syntax

Text-Shadow: H-Shadow V-Shadow Blur-Radius Farbe | Keine | initial |
erben;

Die Attribute des Text-Shadow-Wertes werden nachstehend beschrieben.

Erforderliche Werte
H-Shadow: Dieser Wert wird verwendet, um die horizontale Position des Textschattens anzugeben. Negative Werte können verwendet werden, um den Schatten auf die linke Seite zu bewegen.

V-Shadow: Dieser Wert ist erforderlich, um die vertikale Position eines Schattens festzulegen. V-Shadow akzeptiert auch die negativen Werte als offset-y.

Alle oben genannten Werte werden im folgenden Beispiel verwendet.

Beispiel
Im folgenden Beispiel haben wir gesetzt “1px" als "H-Shadow" Und "3px" als "Y-Shadow" Werte. Auch die „Farbe“ des Textschattens ist als „angegeben“Rot”:

Text-Shadow-Effekt!

Ausgang

Optionale Werte

BluR-Radius: Es wird verwendet, um den Textschatten zu verwischen, und sein Standardwert beträgt 0.

keiner: Es zeigt, dass dem Text kein Schatteneffekt hinzugefügt wird.

Farbe: Diese Option wird verwendet, um die Farbe des Textschattens anzugeben.

Initial: Diese Option wird verwendet, um den Standardwert der Text-Shadow-Eigenschaft anzugeben.

erben: Sie können diese Eigenschaft von ihrem übergeordneten HTML -Element erben.

Schauen wir uns nun einige Beispiele an, die sich auf die bereitgestellten Text-Shadow-Werte beziehen.

Beispiel: Hinzufügen von Farbe zu Textschatten hinzuzufügen

Text-Shadow Color Effect

Die Ausführung des oben gegebenen Codes fügt dem hinzugefügten Textschatten einen „orangefarbenen“ Farbffekt hinzu:

Das folgende Beispiel zeigt den Unschärfeeffekt auf eine Text-Shadow-Eigenschaft.

Beispiel: Hinzufügen von Unschärfeneffekten zum Textschatten-Schatten

Text-Shadow-Unschärfeeffekt!

Ausgang

Die text-Shadow-Eigenschaft akzeptiert auch die Liste der von den Kommas getrennten Schatten. Das folgende Beispiel zeigt das Verfahren zur Durchführung der angegebenen Operation.

Beispiel

Text-Shadow mit mehreren Textleuchten.

Ausgang

Wir haben die wichtigsten Informationen im Zusammenhang mit der Verwendung von geliefert "Text-Shadow" Eigentum in CSS.

Abschluss

In CSS, Text-Shadow-Eigenschaft wird zum Hinzufügen von Schatten zu den HTML -Textelementen verwendet. Es wird hauptsächlich verwendet, um dem Text Farben hinzuzufügen, seinen Schatten zu verwischen und seine horizontale und vertikale Position zu setzen. Dieser Artikel enthält eine gründliche Anleitung zum Verfahren zur Verwendung horizontaler und vertikaler Abmessungen des Textschattens, verwischt die Textschatten und verwenden zuletzt Farben mit der Text-Shadow-Eigenschaft von CSS.