こちらの記事「スーパーリロードとは？」のように、ブログ記事で「ショートカットコマンドを使うには、キーボードのキーをこうやって入力するんですよ」みたいな説明をする時に便利なCSSスタイルです。
画像を使わず、文字数の制限などもなく、クラスを割り当てるだけで使えるCSSです。
一行の中で高さもマッチしますし、使いやすくなってると思います。
CSS
.keyboard {
display: inline-block;
width: auto;
height: auto;
padding: 4px 12px;
margin: 0 4px;
background: #fff;
border-radius: 3px;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
font: 18px/24px Helvetica, Arial, serif;
text-align: center;
color: #666;
}
もちろんHTMLのほうでは
<p>ここで <span class="keyboard">⌘</span> + <span class="keyboard">Alt</span> + <span class="keyboard">Esc</span> と入力します・・・</p>
のようにクラス指定します。
以上です！
このスタイルは、下記の記事で紹介されていたものを使いやすく汎用性を持たせるなど改良・修正して作ったものです。
[CSS]ショートカットの表記をApple Keyboard風に美しく実装するスタイルシート | コリス
