網頁

2017/8/18

網頁中的鍵盤熱鍵操作說明的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
  • 空白鍵

沒有留言:

張貼留言