So legen Sie den weißen Schriftstrich in CSS fest-CSS-Tutorial-php.cn

So legen Sie den weißen Schriftstrich in CSS fest

青灯夜游

Freigeben： 2023-02-06 19:19:06

Original

10286 Leute haben es durchsucht

So legen Sie den weißen Strich der Schriftart in CSS fest: 1. Verwenden Sie das Textstrich-Attribut, um die Strichstärke und die Farbe des Textes festzulegen. Das Syntaxformat ist „text-strich: 3px #fff;“; Verwenden Sie das text-shadow-Attribut, um einen weißen Schatten um die Schriftart hinzuzufügen und so einen Stricheffekt zu erzeugen.

So legen Sie den weißen Schriftstrich in CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

css legt den weißen Strich für die Schriftart fest

1 Verwenden Sie das Text-Strich-Attribut

Das Text-Strich-Attribut wird verwendet, um dem Text einen Strich hinzuzufügen. Mit dieser Eigenschaft können Sie die Strichstärke und Farbe von Text ändern. Diese Eigenschaft wird mit dem Präfix -webkit- unterstützt.

Text-Stroke ist die Abkürzung für Text-Stroke-Width und Text-Stroke-Color (Füllfarbe für Text).

Syntax:

text-stroke: <width> <color>;

Nach dem Login kopieren

Parameter:

width: Legen Sie die Strichstärke des Texts fest.
color: Legen Sie die Strichfarbe des Texts fest.

So legen Sie den weißen Schriftstrich in CSS fest

Beispiel:

<!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>

Nach dem Login kopieren

Rendering :

So legen Sie den weißen Schriftstrich in CSS fest

2. Verwenden Sie das text-shadow-Attribut

text-shadow: Setzen Sie einen Schatten auf den Text.

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

Nach dem Login kopieren

Farbe: Farbe angeben.
Länge: Die erste Länge gibt den Ausdehnungsabstand des Schattens in horizontaler Richtung an, und die zweite Länge gibt den Ausdehnungsabstand des Schattens in vertikaler Richtung an, der ein negativer Wert sein kann.
Deckkraft: Gibt den Abstand des Schattenunschärfeeffekts an.

Die Richtungsreihenfolge, die durch die vier durch Kommas getrennten Attributwerte dargestellt wird, ist unten rechts und oben links.

Beispiel:

<!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>

Nach dem Login kopieren

Rendering:

So legen Sie den weißen Schriftstrich in CSS fest

【Empfohlenes Tutorial: CSS-Video-Tutorial】

Das obige ist der detaillierte Inhalt vonSo legen Sie den weißen Schriftstrich in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!