How to set font white stroke in css-CSS Tutorial-php.cn

How to set font white stroke in css

青灯夜游

Release： 2023-02-06 19:19:06

Original

10282 people have browsed it

How to set the white stroke of the font in css: 1. Use the text-stroke attribute to set the stroke width and color of the text. The syntax format is "text-stroke: 3px #fff;"; 2. Use text The -shadow attribute adds white shadow around the font to achieve a stroke effect.

How to set font white stroke in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css sets the font white stroke

1. Use the text-stroke attribute

text The -stroke property is used to add a stroke to text. This property can be used to change the stroke width and color of text. This property is supported using the -webkit- prefix.

text-stroke is the abbreviation of text-stroke-width and text-stroke-color (fill color for text).

Syntax:

text-stroke: <width> <color>;

Copy after login

Parameters:

width: Set the stroke thickness of the text
color: Set the stroke color of the text

How to set font white stroke in css

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			@import url(https://fonts.googleapis.com/css?family=Bangers);
			body {
				font-size: 50%;
				line-height: 1;
				background: palevioletred;
			}
			
			h1 {
				font: 8em/1 Bangers, sans-serif;
				-webkit-text-stroke: 3px #fff; 
				color:black;
			}
		</style>
	</head>

	<body>
		<h1>Hello World</h1>
	</body>

</html>

Copy after login

Rendering:

How to set font white stroke in css

2. Use the text-shadow attribute

text-shadow: Set a shadow to the text.

text-shadow:color||length||length||opacity。

Copy after login

color: Specify the color.
length: The first length specifies the extension distance of the shadow in the horizontal direction, and the second length specifies the extension distance of the shadow in the vertical direction, which can be a negative value.
opacity: Specifies the distance of the shadow blur effect.

The direction order represented by the four attribute values separated by commas is lower right, upper left.

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>text-shadow-文字描边</title>
		<style>
			.demo {
				height: 200px;
				text-align: center;
				font-family: Verdana;
				font-size: 30px;
				font-weight: bold;
				background: peru;
				color: #000;
			}
			
			.stroke {
				text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
			}
		</style>
	</head>

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

</html>

Copy after login

Rendering:

How to set font white stroke in css

##[Recommended tutorial:

CSS video tutorial]

The above is the detailed content of How to set font white stroke in css. For more information, please follow other related articles on the PHP Chinese website!