CSSで縁取り文字を作る（text-shadowの応用）

text-shadowプロパティを重ねることで、CSSだけで縁取り文字（アウトライン文字）を作ることが可能です。

テキストに輪郭をつけて目立たせる

基本のCSS


.outline-text {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.outline-text {

color: white;

text-shadow:

-1px -1px 0 #000,

1px -1px 0 #000,

-1px 1px 0 #000,

1px 1px 0 #000;

}

太めの縁取り


.outline-text {
  text-shadow:
    2px 2px 0 #000,
   -2px 2px 0 #000,
    2px -2px 0 #000,
   -2px -2px 0 #000;
}

.outline-text {

text-shadow:

2px 2px 0 #000,

-2px 2px 0 #000,

2px -2px 0 #000,

-2px -2px 0 #000;

}

text-shadowの数を増やすことで縁取りを強調できます。