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

selektor {
	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:

<p>
	Text
</p>

body {
	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:

<p>
	Text
</p>

body {
	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:

<p>
	Text
</p>

body {
	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:

<p>
	Text
</p>

body {
	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

text-stroke xassəsi,
hansı ki, mətnə kontur təyin edir
text-stroke-color xassəsi,
hansı ki, mətnin konturuna rəng təyin edir