追記(2012/06/01):border-radiusについてはベンダープレフィックス(9, 10行目の記述)は必要なくなりました。
ショートカットキーとかを表示させる時に画像を用意するのは面倒なのでCSS3の角丸と昔ながらのborder-styleを使ってキーボードのキーを表現してみた。
例↓
Windows 7ではWin+数字でタスクバーにあるソフトを起動できます。
と、こんな感じで表示することができます。
border-style: outset;は古臭いHPの香りがしますが、
角丸にすると本当にキーっぽくて良い感じです。
サンプルコードはコチラ。
span.key { border: 5px #eee outset; color: black; margin: 5px; padding: 5px 10px; line-height: 2.5em; background-color: #eee; border-radius: 10px; /* CSS3草案 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ }