text-stroke-width касиети

text-stroke-width касиети текст тамгаларынын контурдун же анын четинен сызыктын калыңдыгын белгилейт. Бул касиет px, em, rem ж.б. чен бирдиктеринде көрсөтүлгөн маанилерди кабыл алат. Ошондой эле төмөнкү маанилерди да белгилөөгө болот: thin (ичке сызык), medium (орточо сызык) жана thick (калың сызык).

Синтаксис

cssтандоочу {
  text-stroke-width: сан же thin же medium же thick;
}

Мисал

Келгиле, биздин текстибиздин тамгаларына ичке чет сызык белгилейли:

html<p>
  Текст
</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;
}

Результат:

Мисал

Эми келгиле, ичке чет сызыкты орточо менен алмаштыралы:

html<p>
  Текст
</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;
}

Результат:

Мисал

Келгиле, биздин текстибиздин тамгаларына калың чет сызык белгилейли:

html<p>
  Текст
</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;
}

Результат:

Мисал

Ошондой эле келгиле, биздин текстибиздин тамгаларына 2px чет сызык белгилейли:

html<p>
  Текст
</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;
}

Результат:

Ошондой эле караңыз