網頁中的鍵盤熱鍵操作說明的css

撰寫技術文章時，常會有按鍵操作的說明，例如ctrl + h或是ctrl + shift + l等，但若沒有特別的標示，和一般的內容文字容易混淆在一起，雖然在HTML5中多了<kbd>標籤，用來標示按鍵用的標籤，但預設的效果只是把字型改為monospace而已，所以可使用下面的css讓<kbd>的效果更明顯一點。

kbd {
    display: inline-block;
    margin: 0 .1em;
    padding: .1em .6em;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #242729;
    text-shadow: 0 1px 0 #FFF;
    border: 1px solid #adb3b9;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
    white-space: nowrap;
}

使用效果如下

• Ctrl + F
• Ctrl + Shift + F
• Alt + Shift + K
• Enter
• F12
• 空白鍵