直接给<code>加background: linear-gradient()常失效，因其是内联元素，默认无完整盒模型；须设display: inline-block或用<pre><code>组合，并注意background-clip: text的兼容性、深色模式适配及表格中background-origin/clip设置。
为什么直接给 标签加 <code>background: linear-gradient() 常常失效？
因为 <code> 是内联元素（inline），默认不占据块级空间，background 只作用于内容盒的“行内区域”，一旦文字换行或有空格，渐变就会断开、错位甚至不可见。更麻烦的是，多数浏览器对内联元素的 background-size、background-position 支持不一致，尤其在缩放或字体变化时极易露白边。
- 别写
code { background: linear-gradient(...); }就完事——大概率只染到字母底部一小条 - 必须先转为
display: inline-block或display: inline-flex，确保背景有可渲染的盒模型 - 若内容含换行（如多行代码片段），得用
<pre><code>组合，并把渐变设在<pre>上，<code>仅负责字体和颜色 - 避免用
line-height过大又不配padding——这会让背景在行间撕裂
background-clip: text 在 <code> 上怎么用才不出错？
这是实现“文字本身带渐变色”的唯一可靠路径，但必须满足三个硬性条件：元素得是块/内联块、color: transparent、且 WebKit 浏览器需显式加前缀。漏掉任意一个，文字就变空白或回退成纯色。
- 基础写法：
code { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } -
background-clip: text在 Firefox 120+ 才原生支持，旧版必须依赖-webkit-前缀，且不能省略display: inline-block - 别在
<code>上同时设border或text-shadow——前者会遮盖渐变，后者在 Safari 中可能让文字边缘发虚 - 如果渐变方向要随文字流变化（比如竖排文本），改用
background: linear-gradient(to right, ...)而非角度值，更稳定
如何让 <code> 的渐变背景适配深色/浅色模式？
CSS 媒体查询能捕获系统偏好，但 linear-gradient() 里的颜色值不能直接响应变量切换——你得用 color-scheme: light dark 配合自定义属性，否则深色模式下渐变可能和背景融为一体。
- 先在 :root 定义两套色值：
:root { --code-g1: #4facfe; --code-g2: #00f2fe; }，再用@media (prefers-color-scheme: dark) { :root { --code-g1: #0a5f8a; --code-g2: #0088cc; } } - 渐变声明里必须用
var(--code-g1)，不能写死 HEX；否则媒体查询切换后渐变不变 - 别依赖
background-colorfallback——它会被background-image: linear-gradient()覆盖，深色模式下反而更难读 - 测试时手动切系统模式，别只靠 DevTools 模拟器，某些渐变在 macOS Safari 深色模式下会轻微偏色
表格中 <code> 单元格渐变背景为何边缘发虚？
表格单元格默认有 border-collapse: collapse 和隐式 padding，而 <code> 作为内联子元素，其渐变背景会从 content box 起始绘制，与 table-cell 的 padding/border 边界错位，导致视觉上“没贴住”。
立即学习“前端免费学习笔记（深入）”；
- 解决方案不是加大
padding，而是重置绘制起点：td code { background-origin: padding-box; background-clip: padding-box; } - 必须配合
display: inline-block，否则background-origin在<code>上无效 - 如果表格用了
border-radius，额外加overflow: hidden到<td>，否则渐变会溢出圆角 - 别用
background-repeat: no-repeat单独控制——它对内联元素几乎无意义，重点在background-size和background-position
<code> 的渐变方案，都必须确认父容器未设置 transform 或 will-change。这类属性会创建新层叠上下文，导致 background-clip: text 在 Chrome 128+ 中彻底失效，且无任何报错提示。 
