Свойство text-stroke

Die Eigenschaft text-stroke legt die Farbe und Dicke der Kontur von Textzeichen oder deren Umriss fest. Als Wert müssen für die Eigenschaft die Dick des Umrisses und durch ein Leerzeichen getrennt die Farbe des Umrisses angegeben werden.

Syntax

Selektor {
	text-stroke: Umrissdicke und deren Farbe;
}

Grundlegendes Beispiel

Einfacher Textumriss:

<div class="stroked-text">
	Lorem ipsum dolor sit amet
</div>

.stroked-text {
	font-size: 48px;
	font-weight: bold;
	-webkit-text-stroke: 2px red;
	text-stroke: 2px red;
}

Nur Umriss

Jetzt lassen wir die Textfarbe mit der Hintergrundfarbe übereinstimmen (in unserem Fall weiß). Als Ergebnis bleibt nur der Umriss übrig:

<div class="stroked-text">
	Lorem ipsum dolor sit amet
</div>

.stroked-text {
	font-size: 48px;
	font-weight: bold;
	color: white;
	-webkit-text-stroke: 2px black;
	text-stroke: 2px black;
}

Verlaufsumriss

Erstellen wir einen Verlaufsumriss mit der Eigenschaft background-clip:

<div class="gradient-stroke">
	Lorem ipsum dolor sit amet
</div>

.gradient-stroke {
	font-size: 42px;
	font-weight: bold;
	background: linear-gradient(to right, #ff8a00, #e52e71);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1px #333;
	text-stroke: 1px #333;
}

Mehrfacher Umriss

Doppelter Umriss-Effekt mit text-shadow:

<div class="double-stroke">
	Lorem ipsum dolor sit amet
</div>

.double-stroke {
	font-size: 40px;
	color: white;
	-webkit-text-stroke: 3px #000;
	text-stroke: 3px #000;
	text-shadow: 
		0 0 5px #000,
		0 0 10px #000;
}

Animierter Umriss

Fügen wir eine Animation hinzu, die den Umriss verändert:

<div class="animated-stroke">
	Lorem ipsum dolor sit amet
</div>

.animated-stroke {
	font-size: 38px;
	color: white;
	-webkit-text-stroke: 1px #ff0000;
	text-stroke: 1px #ff0000;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
	50% { -webkit-text-stroke: 3px #ff0000; text-stroke: 3px #ff0000; }
	100% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
}

Siehe auch

die Eigenschaft text-fill-color,
die die Füllfarbe für Textzeichen festlegt
die Eigenschaft text-stroke-color,
die die Farbe des Textumrisses festlegt
die Eigenschaft text-stroke-width,
die die Dicke des Textumrisses festlegt