HTML code标签结合阴影效果的设计实例-html教程-PHP中文网

box-shadow比text-shadow更适合code元素，因其只包裹文字矩形区域、边缘干净，而text-shadow作用于单字符易模糊小字号代码；需加display:inline-block激活，配合padding和border-radius防断裂，深色模式下须调整阴影颜色。

html code标签结合阴影效果的设计实例

直接给 <code> 标签加阴影，用 box-shadow 最稳，不推荐 filter: drop-shadow()——它会把等宽字体的字符间隙也模糊掉，导致代码可读性下降。

为什么 `box-shadow` 比 `text-shadow` 更适合 `<code>` 元素

<code> 是内联元素，默认不渲染 box-shadow；但加了 display: inline-block 或 background 后就能生效，且阴影只包住文字实际占据的矩形区域，边缘干净。而 text-shadow 作用于每个字符，多层叠加容易糊掉小字号代码（比如 font-size: 12px 时 blur-radius > 1px 就开始发虚）。

text-shadow: 1px 1px 1px rgba(0,0,0,0.2) 在深色背景上可能完全看不见，因为对比度太低
box-shadow 可控范围更大：能调 spread-radius 让阴影略“撑开”，避免被父容器 overflow: hidden 裁掉
真要强调单个关键词（如 const），再单独套一层 text-shadow，别全量用

`<code>` 加阴影的最小可靠写法

以下 CSS 可直接复用，已避开常见裁剪、失焦、透明失效问题：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

code {
  background: #f6f8fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

display: inline-block 是关键，否则 box-shadow 不渲染
padding 和 border-radius 必须配对出现，否则圆角阴影会断裂
rgba(0,0,0,0.08) 比 0.2 更安全：在浅色和深色模式下都保有灰度层次
别用 blur-radius 大于 3px，代码块阴影需要“轻量存在感”，不是卡片浮起

深色主题下阴影失效的硬检查点

很多项目切深色模式后，<code> 阴影突然变淡甚至消失，不是 CSS 写错了，而是环境压制：

父容器用了 background: #0d1117 + box-shadow: 0 1px 3px rgba(0,0,0,0.08) → 黑底+黑影=隐形；解法：@media (prefers-color-scheme: dark) { code { box-shadow: 0 1px 3px rgba(255,255,255,0.06); } }
<code> 套在 <pre class="brush:php;toolbar:false;"><code></code> 里，但 <code><pre class="brush:php;toolbar:false;"></pre> 设了 overflow-x: auto 且没设 padding → 阴影被横向滚动条裁掉；解法：给 <pre class="brush:php;toolbar:false;"></pre> 加 padding: 1px（哪怕 1px 也能露出阴影边）
用了 font-smooth: auto 或 -webkit-font-smoothing: subpixel-antialiased → 在 macOS 上会让阴影边缘发虚；解法：统一删掉这些声明，靠系统默认抗锯齿