PlusOne Blog

【CSS-tips⑦】テキストに縁取り線をつけたい

CSSでテキストに縁取り線をつける方法を紹介します。
また、この方法を応用して少しずらしてデザイン性の高いテキストを表現することもできます。
 

<コード>
ベンダープレフィックスを付与して適用します。
 

    -webkit-text-stroke: 3px #ffffff   //shorthand property
    -webkit-text-stroke-width: 3px;  //縁取り線の太さ
    -webkit-text-stroke-color: #ffffff;  //縁取り線の色
    -webkit-text-fill-color: #9effff;  //縁取り線の内側の色(=テキストの色)

 

テキストに縁取り線から少しずらしたテキスト

 
<対応ブラウザ>
・すべてのブラウザで、ベンダープレフィックス(-webkit-)が必要す。
Can I use

 

 

この記事を読む
記事一覧に戻る