How to add stroke to text in css3? How to implement font stroke style in css3 (detailed code explanation)-CSS Tutorial-php.cn

How to add stroke to text in css3? How to implement font stroke style in css3 (detailed code explanation)

青灯夜游

Release： 2018-10-27 11:19:53

Original

13591 people have browsed it

How to add strokes to text in css3? This article will introduce you to the CSS3 method of adding strokes to text, and let you know the specific method of using the CSS text-stroke attribute to implement font stroke styles. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s introduce the implementation method of text-stroke attribute in css3 to add a stroke effect to text through a simple code example.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字描边</title>
		<style type="text/css">
			.demo {
				font-family: Verdana;
				font-size: 30px;
				font-weight: bold;
			}
			.stroke {
				-webkit-text-stroke: 1px red;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>测试文字，没有添加描边</p>
			<p class="stroke">测试文字，添加了字体描边</p>
		</div>
	</body>
</html>

Copy after login

Rendering:

How to add stroke to text in css3? How to implement font stroke style in css3 (detailed code explanation)

From the example, we can see that css3 can add 1px to the text by setting text-stroke:1px red; red stroke style. From this, we can know that the text-stroke attribute sets or retrieves the stroke thickness of the text in the object through the width value, and sets or retrieves the stroke color of the text in the object through the color value.

Basic syntax of text-stroke attribute:

text-stroke：width  || color ;

Copy after login

It is worth noting that the text-stroke attribute can only be supported in browsers such as Safari and Chrome with webkit kernel. To add the prefix: -webkit-.

How to add stroke to text in css3? How to implement font stroke style in css3 (detailed code explanation)

Next we use the text-stroke attribute to achieve a nice text stroke effect.

Code example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文字描边</title>
		<style type="text/css">
			.demo {
				font-family: Verdana;
				font-size: 50px;
				font-weight: bold;
			}
			
			.stroke {
				-webkit-text-fill-color: transparent;/*文字的填充色*/
				-webkit-text-stroke: 2px #f44336;
				font-style: italic;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p class="stroke">php中文网--文字描边</p>
		</div>
	</body>

</html>

Copy after login

Rendering:

How to add stroke to text in css3? How to implement font stroke style in css3 (detailed code explanation)

##Set by -webkit-text-fill-color: transparent; The fill color of the text is transparent, set the text tilt through font-style: italic;, and set the thickness and good-looking color of the stroke through the text-stroke attribute, and a good-looking word art is realized!

Summary: The above is the entire content of setting the font text stroke style with the text-stroke attribute. You can try it yourself and set the font text stroke style you need. I hope it will be helpful to everyone's learning. For more related tutorials, please visit:

CSS basic video tutorial, HTML video tutorial, bootstrap video tutorial!

The above is the detailed content of How to add stroke to text in css3? How to implement font stroke style in css3 (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!