ホームページ > 記事 > ウェブフロントエンド > CSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法（詳細コード解説）
CSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法（詳細コード解説）
- 青灯夜游オリジナル
- 2018-10-27 11:00:0213538ブラウズ
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 は text-stroke:1px red ストロークを設定することでテキストに 1px を追加できることがわかります。スタイル。このことから、text-ストローク属性は幅の値を通じてオブジェクト内のテキストのストロークの太さを設定または取得し、色の値を通じてオブジェクト内のテキストのストロークの色を設定または取得することがわかります。
テキスト ストローク属性の基本構文:
text-stroke：width || color ;
テキスト ストローク属性は、WebKit カーネルを追加する Safari や Chrome などのブラウザでのみサポートされることに注意してください。 : -ウェブキット-。
次に、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>レンダリング:
CSS 基本ビデオ チュートリアル 、 HTML ビデオ チュートリアル 、bootstrap ビデオ チュートリアル をご覧ください。
以上がCSS3でテキストにストロークを追加するにはどうすればよいですか? CSS3でフォントストロークスタイルを実装する方法（詳細コード解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。