テキストに縁や影をつける

PR　当ページのリンクには広告が含まれています。

text-stroke

境界線を中心にして内外に縁をつけます。

• テキスト

• .セレクタ{-webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;}

   

• 文 字

• .セレクタ{-webkit-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
  color:transparent;}

   

text-shadow

テキストの外側に縁をつけます。

• テキスト

• .セレクタ{text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                0px 1px 0 #FFF,  0-1px 0 #FFF,
                -1px 0 0 #FFF, 1px 0 0 #FFF;}

   

• 文字

• .セレクタ{ text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 15px, rgba(0, 0, 0, 0.2) -1px 1px 15px, rgba(0, 0, 0, 0.2) 1px -1px 15px, rgba(0, 0, 0, 0.2) -1px -1px 15px;}