CSS3 でテキストストロークを実装する 2 つの方法 (要約)

質問

最近、以下に示すように、テキストストローク効果を実現するという要件に遭遇しました。

解決策1

まず、CSS3でこれを実現できる属性があるかどうか調べてみたところ、text-strokeを見つけました。

このプロパティは、テキストの幅とテキストのストロークの色を設定できる複合プロパティです。

このプロパティの使い方は非常に簡単です: text-stroke:1px#f00; (1px はテキストの幅、#ff はテキストのストロークの色です)

この特性の適合性により、口角が少し上がるのがやがて止まるだろうと考え、徐々に固まりました

しかし驚くべきことに、ほとんどのブラウザがこのプロパティをサポートし始めています。プレフィックス-webkit-を追加するだけで済みます。

デモ

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="UTF-8">
        <title>テキスト ストローク-テキスト ストローク</title>
        <スタイル>
            .デモ{
                色: ミスティローズ;
                テキスト配置: 中央;
                フォントファミリー: Verdana;
                フォントサイズ: 30px;
                フォントの太さ: 太字;
            }
            。脳卒中 {
                -webkit-text-stroke: 1px 緑黄色;
            }
        </スタイル>
    </head>
 
    <本文>
        <div class="demo">
            <p>ストロークは追加されていません</p>
            <p class="stroke">フォントストロークを追加しました</p>
        </div>
    </本文>
</html>

解決策2（推奨）

偶然、text-stroke属性がなくてもテキストストロークを実現できる方法を発見しました - text-shadow

また、text-shadowプロパティは互換性が高く、-webkit-をプレフィックスとして付ける必要はありません。

デモ

<!DOCTYPE html>
<html>
     <ヘッド>
           <メタ文字セット="UTF-8">
           <title>テキストシャドウテキストストローク</title>
           <スタイル>
                .デモ{
                    テキスト配置: 中央;
                     フォントファミリー: Verdana;
                     フォントサイズ: 30px;
                     フォントの太さ: 太字;
                     色: 赤;
                }
                
                。脳卒中 {
                     テキストシャドウ: #000 1px 0 0、#000 0 1px 0、#000 -1px 0 0、#000 0 -1px 0;
                }
           </スタイル>
     </head>
     <本文>
           <div class="demo">
                <p>ストロークは追加されていません</p>
                <p class="stroke">フォントストロークを追加しました</p>
           </div>
     </本文>
</html>

CSS シミュレーションテキストストローク効果 2

p{
   テキストシャドウ:
   -1px -1px 0 #4f4d57,  
   1px -1px 0 #4f4d57,
   -1px 1px 0 #4f4d57,
   1ピクセル 1ピクセル 0 #4f4d57,
   0px 2px 2px rgba(0,0,0,0.6);
   フォントサイズ: 15px;         
   色: #f2f2f2;
   フォント ファミリ:"Microsoft YaHei";
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL の日付型の単一行関数コードの詳細な説明

>>: ウェブサイトのコードブロックのpreタグにコピーコードボタンコードを追加します