CSSでウェブページにキーを綺麗に表示する

Pocket

ウェブページの本文中に、キーボード上のキーを表現したいことがあります。
例えば、

コピーをするには Ctrl + C とします

という文を書きたいことがあります。このままでも問題ないのですが、少し工夫をすると以下のように少しキーボード上のキーのような表示にすることができます。

コピーをするにはCtrl+Cとします

方法は簡単で、HTMLで

と書いて、スタイルファイルに以下のような定義を入れるだけです。

ちなみに、これはキーボードショートカット | Firefox ヘルプのページで使用されていた方法です。