撰寫技術文章時,常會有按鍵操作的說明,例如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
- 空白鍵
沒有留言:
張貼留言