検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3でテキストストロークを追加できますか?

CSS3でテキストストロークを追加できますか?

青灯夜游
青灯夜游オリジナル
2021-12-15 16:15:083545ブラウズ

css3 ではストロークを追加できます。方法: 1. text-shadow 属性を使用して、テキストの周囲にテキスト シャドウを追加することでストローク効果を実現します。2. text-blood 属性を使用します。構文 "text-blood:ストローク" エッジ幅の色;"; 3. SVG を使用してテキストにストロークを追加します。

CSS3でテキストストロークを追加できますか?

このチュートリアルの動作環境: 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>

CSS3でテキストストロークを追加できますか?

text-ストローク テキスト ストローク

CSS-webkit-text-ストローク には、テキスト ストロークに特に使用されるプロパティがあります。 、ストロークの幅と色を制御できます。たとえば、

.text{
  -webkit-text-stroke: 2px #333;
}

効果は次のとおりです

CSS3でテキストストロークを追加できますか?

##確かにストロークがありますが、テキストは次のように見えます。

CSS3でテキストストロークを追加できますか?

ここからわかるように、

-webkit-text-ストローク は実際には です。ストロークは中央に配置され、テキストを覆い、ストローク方法は変更できません。実際、多くのデザイン ツールでは、figma

CSS3でテキストストロークを追加できますか?

などのストローク方法を選択できます。では、外側のストローク効果を実現するにはどうすればよいでしょうか?

それも大丈夫です！ 2 つのテキスト レイヤー、1 つのテキスト ストローク レイヤー、および 1 つのテキスト グラデーション レイヤーを使用するだけです。ラベルを保存するには、擬似要素を使用して 

<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 を削除することに注意してください。 #オーバーレイは次のとおりです

CSS3でテキストストロークを追加できますか?別のストロークを変更してもテキストは「細く」なりません

#SVG Text StrokeCSS3でテキストストロークを追加できますか?

SVG も、CSS と同様のストローク効果を実現できます。CSS は SVG から教訓を得て、

ストローク

と # を通じてストロークの色とサイズを制御すると言うべきです。 ##stroke-width

など <pre class="brush:html;toolbar:false;">.text{ /*其他*/ stroke-width: 4px; stroke: #333; }</pre>こんな効果が得られます

パフォーマンスはCSSと同じで、ストロークは中央に配置され、変更できません。

CSS3でテキストストロークを追加できますか?違いは、SVG コントロールがより柔軟であることです。

デフォルトでは、最初に塗りつぶし、次にストロークを行うことになっています

そのため、ストロークが塗りつぶしの上にあるように見えますが、これを変更できます。このルールでは、最初にストロークを設定し、次に塗りつぶしを設定すると、塗りつぶしの色がストロークを覆います。 SVG でのこのルールの変更は、

paint-order

で設定できます。 

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
}
これで外側のストローク効果が得られますが、CSSよりも便利なのでしょうか？

(学習ビデオ共有:

css ビデオ チュートリアルCSS3でテキストストロークを追加できますか?)

以上がCSS3でテキストストロークを追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

関連記事

続きを見る