ホームページ > 記事 > ウェブフロントエンド > CSS3でテキストストロークを追加できますか?
CSS3でテキストストロークを追加できますか?
- 青灯夜游オリジナル
- 2021-12-15 16:15:083503ブラウズ
css3 ではストロークを追加できます。方法: 1. text-shadow 属性を使用して、テキストの周囲にテキスト シャドウを追加することでストローク効果を実現します。2. text-blood 属性を使用します。構文 "text-blood:ストローク" エッジ幅の色;"; 3. SVG を使用してテキストにストロークを追加します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
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>
text-ストローク テキスト ストローク
CSS-webkit-text-ストローク には、テキスト ストロークに特に使用されるプロパティがあります。 、ストロークの幅と色を制御できます。たとえば、
.text{
-webkit-text-stroke: 2px #333;
}効果は次のとおりです
-webkit-text-ストローク は実際には です。ストロークは中央に配置され、テキストを覆い、ストローク方法は変更できません。実際、多くのデザイン ツールでは、figma
<p class="text" data-title="为你定制 发现精彩">为你定制 发现精彩</p>
::beforeSet を生成できます。上にあるグラデーション、下にある元のテキストのストロークを設定します。 ::before
.text::before{
content: attr(data-title);
position: absolute;
background-image: linear-gradient(#FFCF02, #FF7352);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0;
}
.text{
-webkit-text-stroke: 6px #333;
}## の -webkit-text-stroke を削除することに注意してください。 #オーバーレイは次のとおりです
別のストロークを変更してもテキストは「細く」なりません
#SVG Text Stroke
ストローク
と # を通じてストロークの色とサイズを制御すると言うべきです。 ##stroke-width など <pre class="brush:html;toolbar:false;">.text{
/*其他*/
stroke-width: 4px;
stroke: #333;
}</pre>こんな効果が得られます
違いは、SVG コントロールがより柔軟であることです。
そのため、ストロークが塗りつぶしの上にあるように見えますが、これを変更できます。このルールでは、最初にストロークを設定し、次に塗りつぶしを設定すると、塗りつぶしの色がストロークを覆います。 SVG でのこのルールの変更は、
paint-order で設定できます。 .text{
/*其他*/
stroke-width: 4px;
stroke: #333;
paint-order: stroke; /*先描边*/
}これで外側のストローク効果が得られますが、CSSよりも便利なのでしょうか？
css ビデオ チュートリアル
)
以上がCSS3でテキストストロークを追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。