CSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法（詳細コード解説）-CSSチュートリアル-php.cn

CSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法（詳細コード解説）

青灯夜游

リリース： 2018-10-27 11:19:53

オリジナル

13561 人が閲覧しました

CSS3 でテキストにストロークを追加するにはどうすればよいですか?この記事では、CSS3 でテキストにストロークを追加する方法を紹介し、CSS の text-ストローク属性を使用してフォントストロークスタイルを実装する具体的な方法を説明します。困っている友人は参考にしていただければ幸いです。

まずは、テキストにストローク効果を加えるcss3のtext-ストローク属性の実装方法を簡単なコード例で紹介します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字描边</title>
		<style type="text/css">
			.demo {
				font-family: Verdana;
				font-size: 30px;
				font-weight: bold;
			}
			.stroke {
				-webkit-text-stroke: 1px red;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p>测试文字，没有添加描边</p>
			<p class="stroke">测试文字，添加了字体描边</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法（詳細コード解説）

この例から、css3 は text-stroke:1px red ストロークを設定することでテキストに 1px を追加できることがわかります。スタイル。このことから、text-ストローク属性は幅の値を通じてオブジェクト内のテキストのストロークの太さを設定または取得し、色の値を通じてオブジェクト内のテキストのストロークの色を設定または取得することがわかります。

テキストストローク属性の基本構文:

text-stroke：width  || color ;

ログイン後にコピー

テキストストローク属性は、WebKit カーネルを追加する Safari や Chrome などのブラウザでのみサポートされることに注意してください。 : -ウェブキット-。

CSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法（詳細コード解説）

次に、text-ストローク属性を使用して、素晴らしいテキストストローク効果を実現します。

コード例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文字描边</title>
		<style type="text/css">
			.demo {
				font-family: Verdana;
				font-size: 50px;
				font-weight: bold;
			}
			
			.stroke {
				-webkit-text-fill-color: transparent;/*文字的填充色*/
				-webkit-text-stroke: 2px #f44336;
				font-style: italic;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p class="stroke">php中文网--文字描边</p>
		</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

CSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法（詳細コード解説）