用于键盘快捷键文档的拟物化按键

Question

我正在为某些软件的键盘快捷键编写一些文档。文档位于 html/css/js 中。我想要有 acontrol和ckey 的图像（拟物化？），而不是仅仅有[ctrl] + [c]. 我已经在网上看到了这一点，但我没有通过网络搜索找到任何解决方案。

如何使用 HTML/CSS/JS 将 Control 和 C 键呈现为图像？我很乐意使用第三方库来实现效果。

Answer 1

以下 CSS 将对<kbd></kbd>标签中包含的文本进行样式设置，与您在 StackOverflow 中看到的按钮完全相同。

\n\n

CSS

\n\n

kbd {\n    padding: .1em .6em;\n    border: 1px solid #ccc;\n    font-size: 11px;\n    font-family: Arial, Helvetica, sans-serif;\n    background-color: #f7f7f7;\n    color: #333;\n    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;\n    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;\n    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;\n    border-radius: 3px;\n    display: inline-block;\n    margin: 0 .1em;\n    text-shadow: 0 1px 0 #fff;\n    line-height: 1.4;\n    white-space: nowrap\n}\n

\n\n

超文本标记语言

\n\n

<kbd>\xe2\x8c\x98</kbd>+<kbd>X</kbd><br><br>\n\n<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd>\n

\n\n

输出

\n\n

\xe2\x8c\x98+X

\n\n

Ctrl+ Alt+Delete

\n