Detaillierte Einführung in CSS-Verlaufsfarbe, Auslassungszeichen, eingebettete Schriftart und Textschatten

CSS3-Verlauf ist in linearen Verlauf (linear) und radialen Verlauf (radial) unterteilt. Da verschiedene Rendering-Engines unterschiedliche Syntax für die Implementierung von Farbverläufen haben, analysieren wir hier nur die Verwendung basierend auf der W3C-Standardsyntax für lineare Farbverläufe. Für den Rest können Sie sich auf relevante Informationen beziehen. Die W3C-Syntax wird von Browsern wie IE10+, Firefox19.0+, Chrome26.0+ und Opera12.1+ unterstützt.

In diesem Abschnitt sprechen wir über den linearen Gradienten:

Parameter:

Erster Parameter: Geben Sie die Gradientenrichtung an. kann durch das Schlüsselwort „angle“ oder „English“ dargestellt werden:

(Zum Vergrößern auf das Bild klicken)

Wenn der erste Parameter weggelassen wird, wird der Der Standardwert ist „180 Grad“, was „nach unten“ entspricht.

Der zweite und dritte Parameter stellen den Start- und Endpunkt der Farbe dar und können mehrere Farbwerte haben.

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

Rendering:

2. Textüberlauf und Zeilenumbruch

Textüberlauf wird verwendet, um festzulegen, ob dies erfolgen soll Verwendung Eine Auslassungsmarkierung (...) markiert den Textüberlauf innerhalb des Objekts.

Grammatik:

Textüberlauf wird jedoch nur verwendet, um zu erklären, wie Text angezeigt wird, wenn er überläuft, um den Effekt der Erzeugung von Auslassungspunkten zu erzielen Wenn es überläuft, müssen Sie den erzwungenen Text definieren, der in einer Zeile angezeigt werden soll (white-space:nowrap) und den Überlaufinhalt, der ausgeblendet werden soll (overflow:hidden). Nur auf diese Weise kann der Effekt der Anzeige von Auslassungspunkten im Überlauftext erzielt werden Der Code lautet wie folgt:

text-overflow:ellipsis ; overflow:hidden;

Gleichzeitig kann auch Zeilenumbruch verwendet werden das Textverhalten, ob die aktuelle Zeile umgebrochen werden soll, wenn sie die Grenze des angegebenen Containers überschreitet.

Syntax:

normal ist der Standardwert des Browsers, break-word ist so eingestellt, dass es in lange Wörter oder URL-Adressen eingeschlossen wird. Dieses Attribut wird nicht häufig verwendet , verwenden Der Standardwert des Browsers ist ausreichend.

3. Schriftart @font-face einbetten

@font-face kann serverseitige Schriftartdateien laden, sodass der Browser Schriftarten anzeigen kann, die nicht auf dem Computer des Benutzers installiert sind.

Syntax:

@font-face {
font-family: Schriftartname;
src: relativer oder absoluter Pfad zur Schriftartdatei auf dem Server;
}

Nachdem Sie dies eingestellt haben, können Sie den Schriftstil in (font-*) festlegen, genau wie bei einer normalen Schriftart.

Zum Beispiel:

p {
font-size:12px;
font-family: "My Font";
/*Erforderlich, legen Sie @font-face fest Der gleiche Wert von „font-family“ in */
}

4 Textshadow text-shadow

text-shadow kann verwendet werden, um den Schatteneffekt von Text festzulegen.

Syntax:

text-shadow: X-Offset Y-Offset-Unschärfefarbe, ansonsten Offset nach links;

Y-Offset: bezieht sich auf den vertikalen Offset-Abstand Wenn der Wert positiv ist, wird der Schatten nach unten verschoben.

Unschärfe: Bezieht sich auf den Grad der Unschärfe des Schattens. Je größer der Wert ist , desto klarer ist der Schatten. Wenn die Schattenunschärfe nicht benötigt wird, kann der Unschärfewert auf 0 eingestellt werden Verwenden Sie RGBA-Farbe.

Zum Beispiel können wir den folgenden Code verwenden, um den Schatteneffekt festzulegen.

text-shadow: 0 1px 1px #fff

Der obige Artikel bietet ein umfassendes Verständnis des CSS-Farbverlaufs, der Auslassungsmarkierung, der eingebetteten Schriftart und des Textschattens. Dies ist der gesamte vom Herausgeber geteilte Inhalt, ich hoffe es Ich kann Ihnen eine Referenz geben und hoffe, dass jeder die chinesische PHP-Website unterstützt.

Weitere Informationen zu CSS-Verlaufsfarben, ausgelassenen Tags, eingebetteten Schriftarten und Textschatten finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Verwandte Artikel:

HTML5 Canvas: Verlaufsfarben zeichnen

CSS-Schaltflächenverlaufsfarbe

Div+CSS-Hintergrundverlaufsfarbcode-Beispiel