Heim > Artikel > Web-Frontend > Was ist die Text-Shadow-Eigenschaft? Detaillierte Erläuterung der Eigenschaft text-shadow
Was ist die Text-Shadow-Eigenschaft? Detaillierte Erläuterung der Eigenschaft text-shadow
- 云罗郡主Original
- 2018-10-23 13:47:348007Durchsuche
Nach dem Erlernen von CSS möchten viele Schüler den Schatteneffekt einer bestimmten Textzeile erzielen. Für Künstler wird PS verwendet. Im CSS-Stil kann ein Textschatten-Tag in CSS verwendet werden . Dann ist der Textschatten Was ist die Textschatteneigenschaft? Fassen wir die Text-Shadow-Eigenschaft unten zusammen.
Syntax des Text-Schatten-Attributs
text-shadow:x-offset y-offset blur color;
Detaillierte Erläuterung der obigen Codefolge:
x-offset repräsentiert den horizontalen Schatten, repräsentiert die horizontale Versatzposition und die Einheit von x-offset Es ist px, was auch als Prozentsatz ausgedrückt werden kann. Wenn der Wert von x-offset positiv ist, bedeutet dies, dass sich der angezeigte Schatten nach rechts bewegt bedeutet, dass es sich nach links bewegt.
y-Offset stellt den vertikalen Schatten dar. Die Einheit des y-Offsets ist auch die gleiche wie der x-Offset. Wenn es sich um einen positiven Wert handelt, ist dies der Fall bedeutet Aufwärtsverschiebung.
Unschärfe stellt den Grad der Unschärfe des Schattens dar, aber der wichtigste Punkt ist, dass es keine negativen Werte geben kann, sondern nur positive Werte. Je größer der Unschärfewert, desto unschärfer ist er und je kleiner er ist. desto klarer ist es. Wenn wir keine Unschärfe festlegen möchten, setzen wir die Unschärfe auf 0 und
color stellt die Farbe des Schattens dar.
Spezifisches Beispiel:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow属性</title>
<style type="text/css">
#lvye
{
font-size:40px;
text-shadow:4px 4px 2px gray;
-webkit-text-shadow: 4px 4px 2px gray;
-moz-text-shadow: 4px 4px 2px gray;
}
</style>
</head>
<body>
<div id="lvye">php中文网</div>
</body>
</html>Die Wirkung des oben im Browser angezeigten Codes ist wie folgt:
Das Obige ist der Text -shadow für Textschatten Was sind die Eigenschaften? Eine vollständige Einführung zur detaillierten Erklärung des Textschattenattributs. Wenn Sie mehr über das CSS-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWas ist die Text-Shadow-Eigenschaft? Detaillierte Erläuterung der Eigenschaft text-shadow. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!