Text-stroke-width xassəsi

text-stroke-width xassəsi mətn simvollarının konturunun və ya onun xəttinin qalınlığını təyin edir. Xassə px, em, rem və s. kimi ölçü vahidlərində göstərilən qiymətləri qəbul edir. Həmçinin aşağıdakı qiymətləri təyin etmək olar: thin (incə xətt), medium (orta xətt) və thick (qalın xətt).

Sintaksis

cssselektor {
  text-stroke-width: ədəd və ya thin və ya medium və ya thick;
}

Nümunə

Gəlin mətnimizin simvollarına incə kontur təyin edək:

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;
}

Результат:

Nümunə

İndi isə gəlin incə konturu orta ilə əvəz edək:

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;
}

Результат:

Nümunə

Gəlin mətnimizin simvollarına qalın kontur təyin edək:

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;
}

Результат:

Nümunə

Həmçinin gəlin mətnimizin simvollarına 2px qalınlığında kontur təyin edək:

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;
}

Результат:

Həmçinin bax