またCSS3をちょっといじってみました。テキストに影を付けることができるtext-shadowです。

text-shadow ＜ドロップシャドウ＞

.text_shadow {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: 1px 1px 1px #222222;
　　font-size: 124%;
　　color: #ffffff;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadow ＜へこみ＞

.text_shadow_2 {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: -1px -1px 1px #222222;
　　font-size: 124%;
　　color: #ffffff;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadowは下記のような指定の方法です。

text-shadow: 右方向へのズレ, 下方向へのズレ, ぼかし具合, 影の色;

右方向へのズレ、下方向へのズレはマイナスの値を指定すれば、左方向へのズレ、上方向へのズレになります。
また、ぼかし具合は0から値を指定することができます。値を0に指定した場合は、線のようになります。マイナスの値は指定できません。

このtext-shadowは、「,（コンマ）」で区切ることによって複数の値を指定することもできます。

text-shadow ＜縁取り＞

.text_shadow_3 {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: 0 -1px 0 #ffffff, 1px 0 0 #ffffff, 0 1px 0 #ffffff, -1px 0 0 #ffffff;
　　font-size: 124%;
　　color: #222222;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadow ＜立体的＞

.text_shadow_4 {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: 1px 1px 0 #cccccc, 2px 2px 0 #cccccc, 3px 3px 0 #333333;
　　font-size: 124%;
　　color: #ffffff;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadow ＜エンボス＞

.text_shadow_5 {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: -1px -1px 0 #ffffff, 1px 1px 0 #222222;
　　font-size: 124%;
　　color: #0066cc;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadowは、かなり使えそうですね。CSSだけである程度テキストの装飾ができてしまいます。