yasutaro-blog

text-shadow

box-shadowに使い方が似ているtext-shadowです。
text-shadowは文字に影をつけるプロパティです。

text-shadow:3px 3px 3px black;

1番目が横への長さ
2番目が縦の長さ
3番目はぼかしの距離
4番目は色

text-shadow:0px 0px 3px blue,3px 3px 3px black;

「,」を使うと複数の影を付けられます。

いくつか使用例を書いていきます。
（google chromeで見てください。）
（ソースを貼ったらそのまま確認できるように記載方法を変更しました。）

text-shadow

<span style="text-shadow:3px 3px 3px black;font-size:60px;">text-shadow</span>

縦と横に影をのばさず、ぼかしを使用

text-shadow

<span style="text-shadow:0px 0px 10px #333;font-size:60px;">text-shadow</span>

複数指定

text-shadow

<span style="text-shadow:0px 0px 10px #f33,3px 3px 3px #000;font-size:60px;">text-shadow</span>

複数指定

text-shadow

<span style="text-shadow:-1px -1px 1px #333,3px 3px 10px #333;font-size:60px;color:#fff">text-shadow</span>

複数指定

text-shadow

<span style="text-shadow:2px 2px 0px #999,4px 4px 0px #333;font-size:60px;color:#666">text-shadow</span>

box-shadowとborder-radiusとの組み合わせ

<div style="padding:20px;border-radius:20px;background-color:red;box-shadow:0px 0px 20px 3px #fff inset;"><span style="text-shadow:-1px -1px 1px #333;font-size:60px;color:#fff">text-shadow</span></div>

box-shadowとborder-radiusとの組み合わせ

<div style="padding:20px;border-radius:20px;background-color:red;box-shadow:0px 0px 20px 3px #fff inset;"><span style="text-shadow:2px 2px 0px #000,2px 2px 5px #000;font-size:60px;color:#fff">text-shadow</span></div>

box-shadowとborder-radiusとの組み合わせ

<div style="padding:20px;border-radius:20px;background-color:red;box-shadow:0px 0px 20px 3px #fff inset;"><span style="text-shadow:0px 0px 10px #000;font-size:60px;color:#fff">text-shadow</span></div>

box-shadowとborder-radiusとの組み合わせ

<div style="padding:20px;border-radius:20px;background-color:red;box-shadow:0px 0px 20px 3px #fff inset;"><span style="text-shadow:0px 0px 10px #fff;font-size:60px;color:#fff">text-shadow</span></div>

box-shadowとborder-radiusとの組み合わせ

<div style="padding:20px;border-radius:20px;background-color:red;box-shadow:0px 0px 20px 3px #fff inset;"><span style="text-shadow:1px 1px 0px #000,0px 0px 10px #fff;font-size:60px;color:#fff">text-shadow</span></div>

使いどころが微妙かも。
使うとしたらbox-shadowとborder-radiusとの組み合わせでメニューとかですね。