code加box-shadow无效是因为它是inline元素，需设display:inline-block并配padding、border、background-color才能稳定显示阴影。
code 标签默认没有边框和阴影，直接加 box-shadow 通常无效——因为它默认是 inline 元素，且浏览器对内联元素的阴影渲染有严格限制。必须显式改写显示模式并处理盒模型，才能稳定生效。
为什么 code 加 box-shadow 没反应
常见现象：写了 code { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }，但页面完全没阴影。根本原因有三个：
-
code是inline元素，box-shadow对纯 inline 元素不触发（尤其当它没换行、没设置宽高时） - 即使加了
border，上下边也可能被行高（line-height）裁掉或压扁 - 父容器若设了
overflow: hidden或font-size过小，会进一步遮挡阴影
给 code 加边框+阴影的可靠写法
核心动作就两步：先让它是可渲染阴影的盒子，再加样式。推荐用 inline-block 而非 block，避免打断文本流：
- 必须加
display: inline-block - 加
padding（至少2px 6px），否则边框紧贴文字难看，阴影也无空间展开 - 边框建议用
border: 1px solid #e0e0e0，浅灰不抢眼，适配深色/浅色背景 - 阴影用
box-shadow: 0 1px 3px rgba(0,0,0,0.08)，轻微下移+低透明度，模拟自然光感 - 可选加
border-radius: 3px，圆角更柔和；但别超过4px，否则在小字号下易糊
完整 CSS 示例：
code {
display: inline-block;
padding: 2px 6px;
border: 1px solid #e0e0e0;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
background-color: #f9f9f9;
}
code 阴影被截断或发虚的排查点
阴影只显示一半？边缘模糊到看不见？大概率卡在这几个地方：
- 父元素用了
overflow: hidden（比如 Markdown 渲染器里的pre或卡片容器）→ 给父容器加padding: 2px留白，别删overflow -
code套在pre里，而pre默认white-space: pre+ 无line-height控制 → 单独给code设line-height: 1.4防文字挤压 - 用了
filter: drop-shadow()替代box-shadow→ 它不遵循盒模型，容易溢出或模糊失控，除非明确需要滤镜级柔化，否则别碰 - 多层嵌套时（如
code在blockquote里），祖先元素的font-size小于12px→ 阴影像素值会被压缩，建议最小字号设为13px
最易被忽略的是：边框和阴影必须配合 background-color 使用。纯透明背景下的 code 即使加了阴影，人眼也很难识别层次——不是代码错了，是对比度不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
