CSS3 でのテキストのくり抜き、透明度、影の効果の設定

この記事では、CSSでの文字のくり抜き、透明度の値、影の効果の設定例を中心に紹介します。 文字のストロークの色の透明度の値を設定することで、文字をある程度柔らかくすることができます

text-fill-color は空のテキストを作成します:
code

-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px #000;

effect

text-stroke-color の透明度の値はテキストを柔らかくします:
code

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;

effect 1

code

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px transparent;

エフェクト 2

比較すると、エフェクト 2 のテキストがエフェクト 1 よりも少し柔らかいことがわかります。 Code

box-reflect：none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*

Effect

text-shadow には 3 つの長さパラメータがあり、1 つ目は水平オフセットを表し、2 つ目は垂直オフセットを表し、3 つ目はぼかし (オプション) を表します

柔らかいテキストシャドウ:

Code

text-shadow:2px 2px 0 #000;

Effect

複数の影:
コード

text-shadow:1px 1px 5px #000;

効果

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語ネットにご注目ください。 ！

関連する推奨事項:

CSS3を使用して基本的なグラフィックを描画する

CSS3でのレイヤーシャドウとテキストシャドウの使用

繰り返し表示を避けるためにCSSを使用して背景画像を引き伸ばしたり塗りつぶしたりする方法

以上がCSS3 でのテキストのくり抜き、透明度、影の効果の設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。