Sifa text-stroke

Sifa text-stroke huweka rangi na unene wa mstari wa nje wa herufi za maandishi au mstari wake wa nje. Kama thamani katika sifa inahitaji kuwekewa unene wa mstari wa nje na kupitia nafasi rangi ya mstari wa nje.

Syntax

kichagua {
	text-stroke: unene wa mstari wa nje na rangi yake;
}

Mfano wa msingi

Mstari wa nje rahisi wa maandishi:

<div class="stroked-text">
	Lorem ipsum dolor sit amet
</div>

.stroked-text {
	font-size: 48px;
	font-weight: bold;
	-webkit-text-stroke: 2px red;
	text-stroke: 2px red;
}

Mstari wa nje pekee

Sasa tufanye rangi ya maandishi ifanane na rangi ya mandharinyuma (kwa upande wetu nyeupe). Kama matokeo, mstari wa nje utabaki pekee:

<div class="stroked-text">
	Lorem ipsum dolor sit amet
</div>

.stroked-text {
	font-size: 48px;
	font-weight: bold;
	color: white;
	-webkit-text-stroke: 2px black;
	text-stroke: 2px black;
}

Mstari wa nje wenye gradient

Tutengeneze mstari wa nje wenye gradient kwa kutumia sifa background-clip:

<div class="gradient-stroke">
	Lorem ipsum dolor sit amet
</div>

.gradient-stroke {
	font-size: 42px;
	font-weight: bold;
	background: linear-gradient(to right, #ff8a00, #e52e71);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1px #333;
	text-stroke: 1px #333;
}

Mstari wa nje mwingi

Athari ya mstari wa nje mara mbili kwa kutumia text-shadow:

<div class="double-stroke">
	Lorem ipsum dolor sit amet
</div>

.double-stroke {
	font-size: 40px;
	color: white;
	-webkit-text-stroke: 3px #000;
	text-stroke: 3px #000;
	text-shadow: 
		0 0 5px #000,
		0 0 10px #000;
}

Mstari wa nje wenye uhuishaji

Ongeza uhuishaji wa mabadiliko ya mstari wa nje:

<div class="animated-stroke">
	Lorem ipsum dolor sit amet
</div>

.animated-stroke {
	font-size: 38px;
	color: white;
	-webkit-text-stroke: 1px #ff0000;
	text-stroke: 1px #ff0000;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
	50% { -webkit-text-stroke: 3px #ff0000; text-stroke: 3px #ff0000; }
	100% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
}

Angalia pia

sifa text-fill-color,
ambayo huweka rangi ya kujazia kwa herufi za maandishi
sifa text-stroke-color,
ambayo huweka rangi ya mstari wa nje wa maandishi
sifa text-stroke-width,
ambayo huweka unene wa mstari wa nje wa maandishi