text-shadowプロパティを重ねることで、CSSだけで縁取り文字(アウトライン文字)を作ることが可能です。
目次
テキストに輪郭をつけて目立たせる
基本のCSS
1 2 3 4 5 6 7 8 9 10 |
.outline-text { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } |
太めの縁取り
1 2 3 4 5 6 7 8 9 |
.outline-text { text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000; } |
text-shadowの数を増やすことで縁取りを強調できます。