ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法(詳細コード解説)

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

青灯夜游
青灯夜游オリジナル
2018-10-27 11:00:0213591ブラウズ

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でフォントストロークスタイルを実装する方法(詳細コード解説)

##-webkit-text-fill-color で設定: 塗りつぶし。文字の色を透明にし、font-style:italic;で文字の傾きを設定し、text-blood属性でストロークの太さと見栄えの良い色を設定することで、見栄えの良いワードアートが実現します!


概要: 上記は、text-through 属性を使用してフォント テキスト ストローク スタイルを設定する内容全体です。自分で試して、必要なフォント テキスト ストローク スタイルを設定できます。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、

CSS 基本ビデオ チュートリアル HTML ビデオ チュートリアル bootstrap ビデオ チュートリアル をご覧ください。

以上がCSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法(詳細コード解説)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。