text-shadowプロパティを複数指定して、縁取りの文字を作ります。
デモページはこちら
text-shadowはbox-shadowと違い、広がりの距離とinset(内側の影)は指定できません。
text-shadow: 水平方向の距離 垂直方向の距離 ぼかしの距離 影の色;
htmlの構造は以下の通りです。
<p>text-shadow:上・下・左・右</p>
<div class="div-parent">
<p class="text style01">Flower Garden</p>
</div>
<p>text-shadow:右下・左上・右上・左下</p>
<div class="div-parent">
<p class="text style02">Flower Garden</p>
</div>
<p>text-shadow:上・下・左・右・右下・左上・右上・左下</p>
<div class="div-parent">
<p class="text style03">Flower Garden</p>
</div>
<p>text-stroke:1px</p>
<div class="div-parent">
<p class="text style04">Flower Garden</p>
</div>
文字の縁取りをtext-shadowで作成する場合、ぼかしの距離は共通で0にします。
まず上・下・左・右にtext-shadowを指定します。
この場合、テキストの4つの角に隙間ができてしまい斜め方向の影が必要なことがわかります。
//上・下・左・右
.style01 {
text-shadow: 0 -1px 0 #161616, 0 1px 0 #161616, -1px 0 0 #161616, 1px 0 0 #161616;
}
次に右下・左上・右上・左下にtext-shadowを指定します。
今度は隙間ができず、text-shadowで文字の縁取りが再現できています。
//右下・左上・右上・左下
.style02 {
text-shadow: 1px 1px 0 #161616, -1px -1px 0 #161616, 1px -1px 0 #161616, -1px 1px 0 #161616;
}
試しに上・下・左・右・右下・左上・右上・左下にtext-shadowを指定します。
この場合でも右下・左上・右上・左下にtext-shadowを指定した時と変わりません。
//上・下・左・右・右下・左上・右上・左下
.style03 {
text-shadow: 0 -1px 0 #161616, 0 1px 0 #161616, -1px 0 0 #161616, 1px 0 0 #161616, 1px 1px 0 #161616, -1px -1px 0 #161616, 1px -1px 0 #161616, -1px 1px 0 #161616;
}
最後にtext-strokeプロパティで文字に縁取りを作ってみます。
フォントによっては今回の例のようにうまく縁取りが再現できません。
//text-stroke
.style04 {
-webkit-text-stroke: 1px #161616;
}





