Proprietà CSS text-stroke-color

La proprietà text-stroke-color imposta il colore del tratto (il contorno disegnato attorno ai bordi di ogni carattere), indipendentemente dal color del testo, che riempie l'interno del glifo. Insieme a text-stroke-width permette di dare al testo un aspetto delineato, cavo o bitonale — una tecnica comune per titoli grandi, loghi e badge.

Questa proprietà ha effetto solo quando è impostata una larghezza del tratto. Con una larghezza pari a 0 (il valore predefinito), non c'è nulla da colorare e non si vedrà alcuna differenza sullo schermo.

Il valore iniziale è currentColor, il che significa che, finché non viene impostato, il tratto corrisponde al color dell'elemento. Quindi se il testo è blu, anche il contorno sarà blu.

Quando usarla

Titoli delineati — riempi il testo con un colore e delinealo con un altro per enfatizzare.
Testo cavo / "fantasma" — imposta color: transparent e affidati interamente al tratto, in modo che sia visibile solo il contorno.
Leggibilità su sfondi complessi — un sottile tratto scuro su testo chiaro (o viceversa) mantiene le parole leggibili sopra le immagini.

Supporto browser

Informazione

text-stroke-color fa parte dello standard, ma per un ampio supporto cross-browser è consigliabile impostare anche la proprietà con prefisso -webkit-text-stroke-color. Abbinala sempre a -webkit-text-stroke-width. La forma abbreviata -webkit-text-stroke imposta larghezza e colore in un'unica dichiarazione.

È possibile usare qualsiasi valore di colore CSS. Consulta i colori HTML, l'elenco completo dei nomi di colori CSS o la proprietà color per i formati disponibili.

Valore iniziale	currentColor
Si applica a	Tutti gli elementi.
Ereditato	Sì.
Animabile	Sì. Il colore è animabile.
Versione	CSS Text Module Level 4
Sintassi DOM	object.style.textStrokeColor = "#8ebf42";

Sintassi

Valori di CSS text-stroke-color

text-stroke-color: color | initial | inherit;

Esempio interattivo

L'esempio seguente applica un tratto verde al testo e consente di modificare il colore del tratto in tempo reale con un selettore di colore. Nota come le proprietà con e senza prefisso vengano impostate insieme.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
        margin-top: 2em;
      }
      p {
        margin: 0;
        font-size: 3em;
        -webkit-text-stroke-width: 2px;
        text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
        text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-color property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
    <input type="color" value="#8ebf42" />
    <script>
      const input = document.querySelector('input[type="color"]');
      const p = document.querySelector('p');
      input.addEventListener('input', (e) => {
        p.style.webkitTextStrokeColor = e.target.value;
        p.style.textStrokeColor = e.target.value;
      });
    </script>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio di testo cavo (solo contorno)

Imposta il color del testo su transparent in modo che il riempimento scompaia e rimanga solo il tratto. Questo produce un classico titolo "fantasma" o a contorno.

<!DOCTYPE html>
<html>
  <head>
    <title>Hollow text with text-stroke-color</title>
    <style>
      h1 {
        font-size: 4em;
        color: transparent;
        -webkit-text-stroke-width: 2px;
        text-stroke-width: 2px;
        -webkit-text-stroke-color: #1c87c9;
        text-stroke-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h1>Outline</h1>
  </body>
</html>

Valori

Valore	Descrizione
color	Specifica il colore del tratto. Si possono usare nomi di colore, codici esadecimali, rgb(), rgba(), hsl(), hsla().
initial	Fa usare alla proprietà il suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Proprietà correlate

text-stroke-width — imposta lo spessore del tratto. Senza una larghezza, text-stroke-color non ha effetto visibile.
text-stroke — forma abbreviata che imposta larghezza e colore del tratto insieme.
text-fill-color — controlla il colore di riempimento interno indipendentemente da color.
color — il colore del testo standard; anche la fonte di currentColor, il colore iniziale del tratto.

Esercitati

Pratica

Il valore predefinito di text-stroke-color è il valore predefinito della proprietà

border-color.color.background-color.