Comment définir le trait blanc de la police en CSS-tutoriel CSS-php.cn

Comment définir le trait blanc de la police en CSS

青灯夜游

Libérer： 2023-02-06 19:19:06

original

10286 Les gens l'ont consulté

Comment définir le trait blanc de la police en CSS : 1. Utilisez l'attribut text-Stroke pour définir la largeur du trait et la couleur du texte. Le format de syntaxe est "text-Stroke: 3px #fff; "; 2. Utiliser du texte L'attribut -shadow ajoute une ombre blanche autour de la police pour obtenir un effet de trait.

Comment définir le trait blanc de la police en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

css définir la police trait blanc

1 Utilisez l'attribut texte-trait

texte. La propriété -Stroke est utilisée pour ajouter un trait au texte. Cette propriété peut être utilisée pour modifier la largeur du trait et la couleur du texte. Cette propriété est prise en charge à l'aide du préfixe -webkit-.

text- Stroke est l'abréviation de Text-Stroke-Width et Text-Stroke-Color (couleur de remplissage du texte).

Syntaxe :

text-stroke: <width> <color>;

Copier après la connexion

Paramètres :

largeur : Définir l'épaisseur du trait du texte
couleur : définissez la couleur du trait du texte

Comment définir le trait blanc de la police en CSS

Exemple :

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

Copier après la connexion

Rendu :

Comment définir le trait blanc de la police en CSS

2. Utilisez l'attribut text-shadow

text-shadow : définissez une ombre sur le texte.

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

Copier après la connexion

color : Précisez la couleur.
longueur : La première longueur spécifie la distance d'extension de l'ombre dans la direction horizontale, et la deuxième longueur spécifie la distance d'extension de l'ombre dans la direction verticale, qui peut être négative valeur.
opacité : Spécifie la distance de l'effet de flou d'ombre.

L'ordre de direction représenté par les quatre valeurs d'attribut séparées par des virgules est en bas à droite, en haut à gauche.

Exemple :

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

Copier après la connexion

Rendu :

Comment définir le trait blanc de la police en CSS