css text-stroke text stroke

text-stroke is not a standard css property, so readers of this article can be regarded as entertainment

text-stroke is a compound attribute, including text-stroke-width, text-stroke-color
because it is not a standard attribute, in most cases it needs to be prefixed

text-stroke-width refers to the width of the stroke. The stroke style of this attribute is the residential stroke (inner and outer sides are each half), and there is only one centered stroke

Combined with absolute positioning, the unstroke content is used to cover the stroked content, and the effect of only the outer edge can be achieved

demo

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>text-stroke 文字描边</title>
	<style>
		body {
     
     
			font-family: "隶书";
			font-size: 40px;
			color: #fcc;
			font-weight: bolder;
		}

		.font1 {
     
     
			-webkit-text-stroke-width: 2px;
			-webkit-text-stroke-color: #f00;
			text-stroke-width: 2px;
			text-stroke-color: #f00;
		}

		.font2 {
     
     
			position: relative;
		}

		.font2 p {
     
     
			position: absolute;
			top: 0;
			left: 0;
		}

		.font2 .stroke {
     
     
			-webkit-text-stroke-width: 2px;
			-webkit-text-stroke-color: #f00;
			text-stroke-width: 2px;
			text-stroke-color: #f00;
		}
	</style>

</head>

<body>
	<div class="font1">
		描了2像素的边, 内外各一半
	</div>
	<div class="font2">
		<p class="stroke">描了1像素的边, 仅是外边</p>
		<p>描了1像素的边, 仅是外边</p>
	</div>
</body>

</html>

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Reference:
-webkit-text-stroke-width-CSS: Cascading Style Sheets | MDN

//end

css text-stroke text stroke

Guess you like