Heim >Web-Frontend >CSS-Tutorial >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:2010434Durchsuche
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.
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.
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 :
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:
【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!