suchen

Heim  >  Artikel  >  Web-Frontend  >  So legen Sie den weißen Schriftstrich in CSS fest

So legen Sie den weißen Schriftstrich in CSS fest

青灯夜游
青灯夜游Original
2021-02-25 12:04:2010378Durchsuche

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

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>

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。

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist die CSS-Absatzeinrückungseigenschaft?Nächster Artikel：Was ist die CSS-Absatzeinrückungseigenschaft?

In Verbindung stehende Artikel

Mehr sehen