CSS3 は text-shadow 属性を使用して、さまざまな効果を備えたテキストスタイルの表示を実現します

1. エフェクト画像の表示:

これは私がずっと前に学んだテキストエフェクトです。しかし、それでも非常に実用的で興味深いものです。 CSS3 が提供する text-shadow プロパティを使用して、ページ上のテキストに影の効果を追加できるため、以前に使用されていた煩雑な画像を置き換えることができます。これまでのところ、Safari、FireFox、Chrome、Opera などの主流ブラウザはすべてこの機能をサポートしています。

2. CSS3のtext-shadowプロパティの紹介

text-shadow 属性は、ページ上のテキストに影効果を追加できます。基本的な構文は次のとおりです。

text-shadow:none|none|[,]*

text-shadow:none|[,]*

text-shadow 属性の初期値は None で、すべての要素に適用されます。

color: 色を示します

length: 浮動小数点数と単位識別子で構成される長さの値を表し、負の値にすることもでき、影の水平方向の延長距離を指定します。

上記の基本的な構文が理解できない場合は、以下の例をご覧ください

リーリー

text-shadow 属性の最初の値は水平方向の変位を表し、2 番目の値は垂直方向の変位を表します。正の値は右または下、負の値は左または上、3 番目の値はぼかし半径 (値はオプション)、4 番目の値は影の色を表します (この値はオプション)。この色の値は、影効果の長さの値の前後に配置できます。色が指定されていない場合は、代わりに color 属性の値が使用されます。

text-shadow 属性は、要素のテキストに適用する影効果のカンマ区切りのリストを受け入れます。シャドウ効果は指定された順序で適用されるため、相互にカバーすることはできますが、テキスト自体をカバーすることはできません。シャドウ効果は境界線の寸法を変更しませんが、境界を超えて広がる可能性があります。 (この例では、p タグのパディング スタイルを削除してみると、炎の効果テキストの影が境界を超えていることがわかります)。

3. テキストシャドウ効果のコードは次のとおりです

主な用途は text-shadow のシャドウ リストに加え、適切なカラー マッチングを使用することで、目的の効果を実現できます。

リーリー

リーリー

text-shadow 属性を合理的に使用すると、より単純な特殊なテキスト効果を実現でき、ページが複雑な静的画像リソースを読み込む手間を省くことができます。

最後に、読んでいただきありがとうございます。