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>

套用在痞客邦部落格上的 CSS

<style>
body {
	--ff-sans: -apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;
	--fs-fine: 75%;                      /* origin: 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;
	vertical-align: text-bottom;         /* Base line adjustment */
	margin: 0 0.1em;
	padding: 0.1em 0.6em;
	font-family: var(--ff-sans);
	font-size: var(--fs-fine)!important; /* override font-size setting */
	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>

上面的 CSS 我更動了以下三項: