text-stroke-width қасиеті

text-stroke-width қасиеті мәтін әріптерінің сызық қалыңдығын немесе контурін белгілейді. Бұл қасиет px, em, rem және т.б. өлшем бірліктерінде көрсетілген мәндерді қабылдайды. Сонымен қатар келесі мәндерді де белгілеуге болады: thin (жіңішке сызық), medium (орташа сызық) және thick (қалың сызық).

Синтаксис

cssселектор {
  text-stroke-width: сан немесе thin немесе medium немесе thick;
}

Мысал

Мәтініміздің әріптеріне жіңішке сызық берейік:

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

Результат:

Мысал

Енді жіңішке сызықты орташа сызықпен ауыстырайық:

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

Результат:

Мысал

Мәтініміздің әріптеріне қалың сызық берейік:

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

Результат:

Мысал

Сонымен қатар мәтініміздің әріптеріне 2px сызық берейік:

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

Результат:

Сондай-ақ қараңыз