ホームページ > 記事 > ウェブフロントエンド > CSSでフォントの白いストロークを設定する方法
CSSでフォントの白いストロークを設定する方法
- 青灯夜游オリジナル
- 2021-02-25 12:04:2010383ブラウズ
CSS でフォントの白いストロークを設定する方法: 1. text-ストローク属性を使用して、テキストのストロークの幅と色を設定します。構文形式は「text-ストローク: 3px #fff;」です。 "; 2. テキストを使用する -shadow 属性は、フォントの周囲に白い影を追加して、ストローク効果を実現します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
css はフォントの白いストロークを設定します
1. テキスト ストローク属性を使用します
text -ストローク プロパティは、テキストにストロークを追加するために使用されます。このプロパティを使用して、テキストのストロークの幅と色を変更できます。このプロパティは、-webkit- プレフィックスを使用してサポートされます。
text-ストロークは、テキストストローク幅とテキストストロークカラー（テキストの塗りつぶしの色）の略称です。
構文:
text-stroke: <width> <color>;
パラメータ:
width: テキストのストロークの太さを設定します
-
color: テキストのストロークの色を設定します
例:
<!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>レンダリング:
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 ビデオ チュートリアル]
以上がCSSでフォントの白いストロークを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。