Eienskap text-stroke-width

Die eienskap text-stroke-width spesifiseer die dikte van die buitelyn van tekskarakters of sy omtrek. Die eienskap aanvaar waardes, gespesifiseer in grootte-eenhede soos px, em, rem ens. Ook kan die volgende waardes gespesifiseer word: thin (dun lyn), medium (medium lyn) en thick (dik lyn).

Sintaksis

cssselekteerder {
  text-stroke-width: getal of thin of medium of thick;
}

Voorbeeld

Kom ons spesifiseer 'n dun omskrywing vir ons teks se karakters:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: thin;
  text-stroke-width: thin;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Voorbeeld

En nou, laat ons die dun omskrywing verander na 'n medium een:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: medium;
  text-stroke-width: medium;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Voorbeeld

Kom ons spesifiseer 'n dik omskrywing vir ons teks se karakters:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: thick;
  text-stroke-width: thick;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Voorbeeld

Laat ons ook 'n omskrywing van 2px spesifiseer vir ons teks se karakters:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: 2px;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Sien ook