CSSでフォントの白いストロークを設定する方法-CSSチュートリアル-php.cn

CSSでフォントの白いストロークを設定する方法

青灯夜游

リリース： 2023-02-06 19:19:06

オリジナル

10386 人が閲覧しました

CSS でフォントの白いストロークを設定する方法: 1. text-ストローク属性を使用して、テキストのストロークの幅と色を設定します。構文形式は「text-ストローク: 3px #fff;」です。 "; 2. テキストを使用する -shadow 属性は、フォントの周囲に白い影を追加して、ストローク効果を実現します。

CSSでフォントの白いストロークを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css はフォントの白いストロークを設定します

1. テキストストローク属性を使用します

text -ストロークプロパティは、テキストにストロークを追加するために使用されます。このプロパティを使用して、テキストのストロークの幅と色を変更できます。このプロパティは、-webkit- プレフィックスを使用してサポートされます。

text-ストロークは、テキストストローク幅とテキストストロークカラー（テキストの塗りつぶしの色）の略称です。

構文:

text-stroke: <width> <color>;

ログイン後にコピー

パラメータ:

width: テキストのストロークの太さを設定します
color: テキストのストロークの色を設定します

CSSでフォントの白いストロークを設定する方法

例:

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

ログイン後にコピー

レンダリング:

CSSでフォントの白いストロークを設定する方法

2. text-shadow 属性を使用します

text-shadow: テキストに影を設定します。

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

ログイン後にコピー

color: 色を指定します。
length: 最初の長さは水平方向の影の延長距離を指定し、2 番目の長さは垂直方向の影の延長距離を指定します。負の値にすることもできます。価値。
不透明度: 影のぼかし効果の距離を指定します。

カンマで区切られた 4 つの属性値で表される方向の順序は、右下、左上です。

例:

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

ログイン後にコピー

レンダリング:

CSSでフォントの白いストロークを設定する方法