代码块阴影需自定义 shadow-[...]：偏移为0、模糊≤6px、扩散为0、深色主题用rgba(255,255,255,0.03–0.05)，避免预设类导致发虚或不可见。
直接用 shadow-lg 或 shadow-xl 套在 <pre> 或 <code> 上，大概率会糊成一团、边缘发虚、深色背景里消失——这不是阴影太弱，而是预设类没考虑代码块的高对比、小字号、多行文本特性。
为什么 shadow-lg 在代码块上看起来“脏”？
预设阴影如 shadow-lg 的默认值是 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)，它为卡片设计：大模糊+负扩散，用来压低主体。但代码块通常有纯白或深灰背景、等宽字体、密集字符，这种“撑开式”阴影反而让边框发虚、行间层次混乱。
- 小字号（
text-sm或text-xs）下，10px 垂直偏移会让阴影“浮”在文字上方，像盖了层毛玻璃 - 深色主题（
dark:bg-gray-900）中，rgba(0,0,0,0.1)几乎不可见，而rgba(255,255,255,0.05)又会过曝 -
<pre>元素常带overflow-x-auto，若父容器设了overflow-hidden，阴影会被直接裁掉——尤其shadow-xl的大扩散半径
推荐用 shadow-[...] 自定义轻量外阴影
代码块真正需要的是「清晰边界感」而非「立体浮起」，用 shadow-[...] 手动控制四个参数，避开预设类的过度设计：
- 偏移保持
0：避免阴影漂移，贴合代码块物理边界 - 模糊半径 ≤ 6px：选
4px或6px，保证文字边缘锐利不晕染 - 扩散半径设为
0：不要负值，防止阴影向内“吃”边框 - 颜色按主题切换：
dark:shadow-[0_0_4px_rgba(255,255,255,0.08)]配深色背景，shadow-[0_0_4px_rgba(0,0,0,0.06)]配浅色背景
示例写法：<pre class="p-4 rounded-lg shadow-[0_0_4px_rgba(0,0,0,0.06)] dark:shadow-[0_0_4px_rgba(255,255,255,0.08)]">
立即学习“前端免费学习笔记（深入）”；
深色模式下别硬套浅色阴影值
很多人复制浅色主题的 shadow-md 到深色代码块里，结果阴影“看不见”，其实是 alpha 值和底色反差崩了。深色背景需两个调整：
- 颜色必须用
rgba()或hsla()显式指定亮色，比如rgba(255,255,255,0.08)，禁用black或white这类命名色 - alpha 值要比浅色背景时更低（
0.06 → 0.08不够，得压到0.03–0.05），否则会像蒙了层灰雾 - 如果用了 CSS 变量（如
var(--code-shadow)），确保该变量在:root和.dark下都正确定义，shadow-[var(--code-shadow)]才能响应切换
内阴影（shadow-inner）适合模拟“嵌入式编辑器”感
如果你的代码块要表现「正在被编辑」或「嵌入 IDE 界面」的效果，shadow-inner 比外阴影更贴切——但它不是拿来直接加的：
- 默认
shadow-inner是inset 0 2px 4px -2px rgba(0,0,0,0.1)，在深色背景上几乎不可见，建议扩展配置：inner-code: 'inset 0 1px 3px -1px rgba(255,255,255,0.05)' - 必须配
bg-gray-800或bg-slate-900这类深灰背景，纯黑底会让内阴影失效 - 记得加
rounded和足够p-4，否则内阴影无处渲染 - 慎用在带
overflow-x-auto的代码块上——某些 Safari 版本对inset+ 滚动容器组合渲染异常，边缘可能断裂
最易被忽略的一点：代码块阴影是否随语言高亮插件（如 Prism、Shiki）的 token 渲染节奏重绘。如果阴影在语法高亮后突然变淡或错位，不是 Tailwind 问题，而是高亮库动态插入 <span> 改变了 DOM 结构导致 box-shadow 重算——这时得用 will-change: transform 或固定 min-height 锚定布局。
