CSSでテキストに縁取りを設定する

CSSでテキストに縁取りを付ける方法を試してみます。

サンプルコード

まずはtext-strokeを使う方法です。

<p class="lead">ギターと孤独と蒼い惑星</p>
<p class="lead text-stroke">ギターと孤独と蒼い惑星</p>

text-strokeを使用する際、現時点では-webkit-のプレフィックスが必要になるようです。

.text-stroke {
	-webkit-text-stroke: 2px orange;
	text-stroke: 2px orange;
}

これで2pxのオレンジ色の縁取りを付けることができました。
text-strokeで縁取りを付けるデモページ
text-strokeの場合、縁取りはテキストの中央につく(外側・内側の両方に広がる)ようです。

次にtext-shadowを使う方法です。

<p class="lead">ギターと孤独と蒼い惑星</p>
<p class="lead text-shadow">ギターと孤独と蒼い惑星</p>

text-shadowはカンマ区切りで複数の指定ができるので、ぼかしなしの影を8方向に設定します。

.text-shadow {
	text-shadow:
		0px -2px 0 orange, /* 上 */
		2px -2px 0 orange, /* 右上 */
		2px 0 0 orange, /* 右 */
		2px 2px 0 orange, /* 右下 */
		0 2px 0 orange, /* 下 */
		-2px 2px 0 orange, /* 左下 */
		-2px 0 0 orange, /* 左 */
		-2px -2px 0 orange; /* 右上 */
}

これで2pxのオレンジ色の縁取りを付けることができました。
text-shadowで縁取りを付けるデモページ
text-shadowの場合、縁取りはテキストの外側につきます。

text-shadowの場合、mixinとして用意しておくと使い勝手がよさそうです。

@mixin text-border($size: 1px, $color: #000000) {
	text-shadow:
		0 -#{$size} 0 $color,
		$size -#{$size} 0 $color,
		$size 0 0 $color,
		$size $size 0 $color,
		0 $size 0 $color,
		-#{$size} $size 0 $color,
		-#{$size} 0 0 $color,
		-#{$size} -#{$size} 0 $color;
}

@include text-border(2px, orange);