CSS: 漂亮的按鍵用 CSS @ 傑克! 真是太神奇了!

前言

今天心血來潮, 用 Google 查了如何在網頁中敘述按鍵組合. 結果意外在 stackoverflow 上看到這組漂亮的按鍵 CSS, 就順手記錄下來.

用法

使用 <kbd> tag 將按鍵文字括住即可. 例如: <kbd>Ctrl</kbd> 就變成 Ctrl, <kbd>Shift</kbd> 就變成 Shift. 如果按鍵為圖示, 或者還想加入代表該按鍵的圖示, 則以 HTML 格式插入代表該圖示 unicode 編碼, 或是直接插入該 unicode 字元均可. 例如: <kbd>⊞ Win</kbd>+<kbd>Tab↹</kbd> 就變成 ⊞ Win+Tab ↹, <kbd>&#x2318</kbd> 就變成 ⌘.

CSS

<style>
body {
    --ff-sans: -apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;
    --fs-fine: 11px;
    --s-prose-line-height: 1.5;
    --black-075: hsl(210,8%,90%);
    --black-300: hsl(210,8%,65%);
    --black-800: hsl(210,8%,15%);
    --br-sm: 3px;
}
kbd {
    display: inline-block;
    margin: 0 0.1em;
    padding: 0.1em 0.6em;
    font-family: var(--ff-sans);
    font-size: var(--fs-fine);
    line-height: var(--s-prose-line-height);
    color: var(--black-800);
    text-shadow: 0 1px 0 var(--white);
    background-color: var(--black-075);
    border: 1px solid var(--black-300);
    border-radius: var(--br-sm);
    box-shadow: 0 1px 1px hsl(210deg 8% 5% / 15%), inset 0 1px 0 0 hsl(0deg 0% 100%);
    overflow-wrap: break-word;
}
</style>