Thuộc tính text-stroke

Thuộc tính text-stroke thiết lập màu sắc và độ dày của đường viền (contour) bao quanh các ký tự văn bản, hay còn gọi là viền ngoài (stroke). Giá trị của thuộc tính cần được xác định bằng độ dày viền và màu sắc của viền, cách nhau bởi dấu cách.

Cú pháp

bộ_chọn {
	text-stroke: độ_dày_viền và màu_của_nó;
}

Ví dụ cơ bản

Viền văn bản đơn giản:

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

Chỉ viền

Bây giờ, hãy làm cho màu văn bản trùng với màu nền (trong trường hợp của chúng ta là màu trắng). Kết quả là chỉ còn lại phần viền:

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

Viền có gradient

Tạo viền gradient bằng cách sử dụng thuộc tính 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;
}

Viền nhiều lớp

Hiệu ứng viền kép bằng cách sử dụng 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;
}

Viền có hiệu ứng động

Thêm hiệu ứng động thay đổi viền:

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

Xem thêm

thuộc tính text-fill-color,
thiết lập màu tô cho các ký tự văn bản
thuộc tính text-stroke-color,
thiết lập màu sắc cho viền văn bản
thuộc tính text-stroke-width,
thiết lập độ dày cho viền văn bản