T.Takahashi CSSのtext-shadowと使って文字を縁取りをする 2017-07-11T05:10:40Z
０；ゼロからはじめる！

bootstrap HTML5 ブログカスタマイズ

CSSのtext-shadowと使って文字を縁取りをする

text-shadowの使い方

まずは、テキスト（文字）に対して影をつけるためにtext-shadowの使い方。


    <html>
    <body>
      <p>サンプル</p>
    </body>
    </html>
  

    p {
    color: #ff0000; /*①部分*/
    text-shadow: 10px 10px 5px #4169e1; /*②部分*/
    /* test-shadow: 横方向のズレ 下方向のズレ ぼかし具合 影の色; */
    }

text-shadowの使い縁取りをする

テキスト（文字）に対して、４つの影を用意し縁取る（囲む）ようにして設置する


    <html>
    <body>
      <p>サンプル</p>
    </body>
    </html>
  

    p {
    color: #ff0000; /*①部分*/
    text-shadow:
      2px 2px 3px #4169e1;    /*②部分*/
      2px -2px 3px #4169e1;   /*③部分*/
      -2px -2px 3px #4169e1;  /*④部分*/
      -2px 2px 3px #4169e1;   /*⑤部分*/
    /* test-shadow: 横方向のズレ 下方向のズレ ぼかし具合 影の色; */
    }

関連記事


スポンサーリンク

0 件のコメント :

コメントを投稿