Свойство 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

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

Grundlegendes Beispiel

Einfacher Textumriss:

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

css.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:

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

css.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:

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

css.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:

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

css.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:

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

css.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