Thuộc tính text-stroke-width

Thuộc tính text-stroke-width thiết lập độ dày của đường viền ngoài ký tự văn bản hoặc viền ngoài của nó. Thuộc tính nhận các giá trị được chỉ định bằng đơn vị kích thước như px, em, rem, v.v. Cũng có thể thiết lập các giá trị sau: thin (đường mảnh), medium (đường trung bình) và thick (đường dày).

Cú pháp

bộ chọn {
	text-stroke-width: số hoặc thin hoặc medium hoặc thick;
}

Ví dụ

Hãy thiết lập viền ngoài mảnh cho ký tự văn bản của chúng ta:

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

Ví dụ

Và bây giờ hãy thay đổi viền ngoài mảnh thành viền ngoài trung bình:

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

Ví dụ

Hãy thiết lập viền ngoài dày cho ký tự văn bản của chúng ta:

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

Ví dụ

Ngoài ra, hãy thiết lập viền ngoài 2px cho ký tự văn bản của chúng ta:

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

Xem thêm

thuộc tính text-stroke,
thiết lập viền ngoài văn bản
thuộc tính text-stroke-color,
thiết lập màu sắc cho viền ngoài văn bản