CSS3 verwendet das Text-Shadow-Attribut, um eine Textstilanzeige mit verschiedenen Effekten zu erreichen

1. Effektbildanzeige:

Das ist ein Texteffekt, den ich vor langer Zeit gelernt habe. Aber es ist immer noch sehr praktisch und interessant. Sie können die von CSS3 bereitgestellte Textschatteneigenschaft verwenden, um dem Text auf der Seite einen Schatteneffekt hinzuzufügen, sodass Sie einige umständliche Bilder ersetzen können, die zuvor verwendet wurden. Bisher unterstützen alle gängigen Browser wie Safari, Firefox, Chrome und Opera diese Funktion.

2. Einführung in die Text-Shadow-Eigenschaft von CSS3

Das text-shadow-Attribut kann dem Text auf der Seite einen Schatteneffekt hinzufügen. Die grundlegende Syntax lautet wie folgt:

text-shadow:none|none|[,]*

text-shadow:none|[,]*

Der Anfangswert des text-shadow-Attributs ist None und gilt für alle Elemente.

Farbe: gibt die Farbe an

Länge: Stellt einen Längenwert dar, der aus einer Gleitkommazahl und einer Einheitenkennung besteht. Er kann ein negativer Wert sein und gibt den horizontalen Ausdehnungsabstand des Schattens an.

Wenn Sie die grundlegende Syntax oben nicht verstehen, schauen Sie sich bitte das Beispiel unten an

<span style="color: #800000;"><style type="text/css">
    p</span>{<span style="color: #ff0000;">
        text-shadow</span>:<span style="color: #0000ff;">0.1em 0.1em 0.3em #333333</span>;
    }<span style="color: #800000;">
</style></span>

Der erste Wert des Textschattenattributs stellt die horizontale Verschiebung dar, der zweite Wert stellt die vertikale Verschiebung dar, der positive Wert ist nach rechts oder unten, der negative Wert ist nach links oder oben und der Der dritte Wert ist der Unschärferadius (dieser Wert ist optional), der vierte Wert stellt die Farbe des Schattens dar (dieser Wert ist optional), dieser Farbwert kann vor oder nach dem Längenwert des Schatteneffekts platziert werden. Wenn keine Farbe angegeben ist, wird stattdessen der Wert des Farbattributs verwendet.

Das text-shadow-Attribut akzeptiert eine durch Kommas getrennte Liste von Schatteneffekten, die auf den Text des Elements angewendet werden sollen. Schatteneffekte werden in der angegebenen Reihenfolge angewendet, es ist also möglich, dass sie sich gegenseitig überdecken, jedoch nicht den Text selbst. Schatteneffekte verändern die Abmessungen des Rahmens nicht, können aber über dessen Grenzen hinausgehen. (In diesem Beispiel können Sie versuchen, den Füllstil des p-Tags zu löschen, und Sie werden feststellen, dass der Schatten des Flammeneffekttexts die Grenze überschreitet.)

3. Der Code für den Textschatteneffekt lautet wie folgt

Die Hauptanwendung ist die Schattenliste von Textschatten. Durch eine angemessene Farbanpassung können wir den gewünschten Effekt erzielen.

<span style="color: #800000;"><style type="text/css">
        p</span>{<span style="color: #ff0000;">
            font-size</span>:<span style="color: #0000ff;">5em</span>;<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;">5px</span>;<span style="color: #ff0000;">
            padding</span>:<span style="color: #0000ff;">20px</span>;<span style="color: #ff0000;">
            display</span>:<span style="color: #0000ff;"> inline-block</span>;
        }<span style="color: #800000;">
        .p1</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
        .p2</span>{<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;">black</span>;<span style="color: #ff0000;">
            text-align</span>:<span style="color: #0000ff;">left</span>;<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
        .p3</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> -1px -1px white,1px 1px #333</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#D1D1D1</span>;<span style="color: #ff0000;">
            font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
        .p4</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 1px 1px white,-1px -1px #333</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#D1D1D1</span>;<span style="color: #ff0000;">
            font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
        .p5</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> -1px 0 black,0 1px black,1px 0 black,0 -1px black</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#ffffff</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
        .p6</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 0 0 0.2em #F87,0 0 0.2em #f87</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#d1d1d1</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
    </style></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p1"</span><span style="color: #0000ff;">></span>多色阴影效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p2"</span><span style="color: #0000ff;">></span>火焰效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p3"</span><span style="color: #0000ff;">></span>立体凸起效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p4"</span><span style="color: #0000ff;">></span>立体凹下效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p5"</span><span style="color: #0000ff;">></span>描边效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p6"</span><span style="color: #0000ff;">></span>外发光效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

Die rationelle Verwendung des Textschattenattributs hilft uns, einige einfachere spezielle Texteffekte zu erzielen, die der Seite das Laden einiger komplizierter statischer Bildressourcen ersparen können.

Abschließend vielen Dank fürs Lesen.