テキスト
-webkit-text-stroke
-webkit-text-stroke は、文字の輪郭に線を引いて縁取りします。太さと色を順不同で書くショートハンドです。
構文
<line-width> || <color>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
-webkit-text-stroke3px-webkit-text-stroke-width
#4a86cb-webkit-text-stroke-color
コード
.box {
-webkit-text-stroke: 3px #4a86cb;
}コントロール
-webkit-text-stroke-width3px
-webkit-text-stroke-color#4a86cb
解説
-webkit- が付いていても標準
名前に -webkit- が付いていますが、主要なブラウザはすべてこの名前のまま対応しています。仕様は、Web の互換性のための仕様（Compatibility Standard）に書かれています。色を省略すると currentcolor（文字の色）になります。
線は輪郭の内と外に半分ずつ
線は輪郭を中心に引かれ、文字の塗りの上に重なります。そのため太くするほど、文字の中の塗りが細って見えます。対応しているブラウザでは paint-order: stroke fill を付けると線が塗りの下に回り、文字の形を保ったまま外側だけ縁取れます。
白抜きの文字にする
color: transparent（または -webkit-text-fill-color: transparent）と組み合わせると、塗りが消えて線だけの文字になります。