阴影和透明度是 CSS 中表达层次感的两大利器：卡片投影让内容从背景中浮起来，水印透明度让警示信息不干扰正文阅读，rgba 叠加让区块之间形成自然的视觉过渡。在 dompdf.js 中，box-shadow、text-shadow、opacity 与 rgba 均受支持，配合矢量渲染，阴影边缘平滑、透明度过渡自然，输出质量接近设计稿。本文系统讲解 box-shadow 的四个核心参数（水平垂直偏移、模糊半径、扩散半径、颜色）与 inset 内阴影，透明度在元素级与颜色级两种用法，并结合卡片投影、半透明水印、徽章等场景给出可运行的代码示例，最后说明阴影数量对性能与文件体积的影响及降级方案，帮助你做出有层次、有质感又不失性能的 PDF 文档，让导出的文件在视觉上更接近专业设计工具的输出。文末附有常见问题速查表，覆盖透明度、阴影、体积等高频疑问，可直接对照排查。
透明度有两种表达层级：元素级 opacity 作用于整个元素，包括背景、边框与文字，取值 0 到 1，适合水印、遮罩、整体淡化等场景；颜色级 rgba 只作用于单个颜色值，background-color: rgba(0,0,0,0.3) 只影响背景，文字保持不透明，控制粒度更精细。
两种写法的语义差别决定了使用场景：要整体淡化用 opacity，要局部透明用 rgba。水印场景推荐 opacity 配合低饱和灰色，既能看清又不过度干扰；表格隔行着色推荐 rgba 或带透明度的浅色，视觉更柔和，打印时也不会过重。
透明度在 PDF 中通过 alpha 通道实现，dompdf.js 支持嵌套叠加：父元素半透明、子元素再半透明时，最终效果按标准透明度合成规则计算，与浏览器一致。需要提醒的是，透明度叠加会影响背景色块的观感，深色背景上的半透明色块会明显变深，设计时要在目标底色上验证。
透明度的另一个常见应用是表格隔行着色：rgba(0,0,0,0.04) 这样的浅色叠加比纯色更柔和，打印时也不会过重；整页遮罩场景则用元素级 opacity 加定位层实现，比如导出前的水印提示，透明度配合 z-index 控制层级即可。
需要注意透明元素的性能影响：大量半透明元素叠加会增加渲染计算量，尤其是长文档中每页都有半透明背景时；建议半透明效果只用于少量重点元素，大面积淡化优先用浅色实色代替，性能与观感兼顾。
box-shadow 的完整语法是 box-shadow: offset-x offset-y blur spread color，前两个参数控制阴影偏移方向，模糊半径控制边缘过渡的柔和程度，扩散半径控制阴影向外扩张的大小，颜色决定阴影色相。dompdf.js 按标准语义渲染，参数缺失时按规范使用默认值。
典型用法：box-shadow: 0 2px 8px rgba(0,0,0,0.15) 是卡片投影的通用配置，向下偏移 2px 制造悬浮感，8px 模糊让边缘柔和，15% 透明度的黑色阴影自然不脏；需要更立体的效果可以叠加两层阴影，一层近距深色、一层远距浅色，层次更丰富。
inset 关键字把阴影转为内阴影：box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) 让元素边缘向内凹陷，适合模拟按钮按压态、凹陷输入框等效果；内阴影与外阴影可以同时存在，用逗号分隔多层阴影，实现复合质感。
阴影的方向也有讲究：光源通常来自左上，因此阴影向右下偏移最自然；box-shadow: 0 4px 12px rgba(0,0,0,0.12) 是卡片的标准配置，向上偏移的阴影（0 -4px 12px）则适合悬浮在底部的元素，模拟光源在下方。
模糊半径与扩散半径可以组合出不同质感：小模糊大扩散是柔和的光晕感，大模糊小扩散是清晰的投影感；设计时先定阴影的视觉角色（投影还是光晕），再选择参数组合，比盲目调整参数更高效。
text-shadow 为文字添加投影，语法与 box-shadow 类似但参数更少：水平偏移、垂直偏移、模糊半径与颜色。dompdf.js 支持 text-shadow 渲染，适合标题的立体感、白字上的可读性增强等场景，让文档标题在深色背景上更清晰。
文字阴影要克制使用：正文文字加阴影会明显降低可读性，也影响打印效果；标题与关键数字可以加极淡的阴影（如 0 1px 2px rgba(0,0,0,0.2)）增强层次，但不要使用多重复杂阴影，避免打印时出现脏边。
另一种文字层次手段是颜色叠加：深色文字配浅色底、浅色文字配深色底，对比度足够时根本不需要阴影；阴影只用于弥补对比度不足或表达特殊质感，设计文档时优先考虑对比度，阴影作为补充手段使用。
text-shadow 还可以用于模拟文字描边以外的立体效果：多层阴影错开几个像素叠加，可以做出浮雕感标题；但 PDF 是静态文档，效果无法交互反馈，建议标题阴影保持克制的单层设计，稳重大气更符合文档气质。
文字阴影的偏移方向应与卡片阴影一致，保持光源统一；深色背景上的浅色文字加同色系阴影可以增强可读性，浅色背景上的深色文字则基本不需要阴影，注意区分场景，避免画蛇添足。
import { DomPDF } from 'dompdf.js';
const html = `
<style>
.watermark {
position: fixed;
top: 40%; left: 0; right: 0;
text-align: center;
font-size: 48px;
color: #999;
opacity: 0.12;
transform: rotate(-45deg);
z-index: 999;
}
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.08);
padding: 24px;
margin: 32px auto;
width: 70%;
}
.inset {
background-color: #f4f6f8;
border-radius: 6px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
padding: 12px;
}
h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
</style>
<div class='watermark'>内部资料 · 请勿外传</div>
<div class='card'>
<h1>季度经营分析</h1>
<p>双层阴影卡片：近距阴影 + 远距柔影，层次更立体</p>
<div class='inset'>内阴影区域，模拟凹陷输入框</div>
</div>`;
const pdf = new DomPDF({ format: 'A4', margin: '20mm' });
pdf.addPage(html, { format: 'A4' });
pdf.save('shadow-demo.pdf');卡片投影是仪表盘、报价单、产品卡的标配：一层近距阴影加一层远距柔影，悬浮感最自然；表格与正文不建议加阴影，保持平面利于阅读；水印用低透明度斜向文字，兼顾警示与美观，透明度建议在 0.1 到 0.2 之间，太浅失去警示作用，太深干扰阅读。
阴影颜色建议使用黑色加透明度（rgba(0,0,0,0.1) 到 0.25），比纯灰色更自然；不要使用饱和色阴影，会显得廉价。阴影的模糊半径要与元素尺寸匹配：小元素用小模糊，大元素用大模糊，比例失调的阴影一眼就能看出违和感。
一套文档内的阴影风格要保持统一：要么全部卡片用同一组参数，要么按层级分级（普通卡片一层、弹层两层），统一的阴影体系让文档看起来像出自同一设计规范，专业感更强，也方便后续整体调整。
水印是透明度最典型的文档应用：文字水印加低透明度加斜向旋转，在每一页固定呈现，既宣示文档属性又不影响阅读；透明度建议 0.1 起步，结合灰度颜色逐步调整，在真实打印样张上确认效果后定稿。
设计时还要考虑灰度打印环境：彩色阴影在黑白打印下可能完全消失，关键层次不要只依赖彩色阴影表达；必要时用边框、底色或间距区分层次，保证文档在任何输出环境下都保持清晰。
阴影本质是渐变填充的矢量图形，dompdf.js 按矢量方式渲染，单个阴影对文件体积的影响很小；但大量元素同时使用复杂多层阴影会增加渲染计算量，建议每页阴影元素控制在合理数量，重点元素用阴影，次要元素用边框与底色区分。
阴影与透明度的组合会生成额外的图形指令，多层阴影加半透明背景叠加时，文件体积会有小幅增长，批量导出大量带阴影的页面时值得关注；可以先导出样张对比体积，再决定是否精简阴影层级，平衡视觉与体积。
降级方案：如果某个环境对阴影支持不完整，可以用边框加浅色背景模拟浅投影（如 1px 浅灰边框加 2px 浅色下边距），视觉效果接近但实现更朴素；关键信息不要依赖阴影表达，阴影始终是装饰层，去掉后文档依然完整可用。
批量导出时，阴影会随页面数线性增加渲染指令，千页文档的阴影总量值得控制；可以给导出模板提供精简样式开关，在预览版保留完整阴影、在批量版自动降级为边框与底色，兼顾体验与性能。
如果怀疑阴影导致渲染异常，最快的验证方式是临时移除全部阴影观察输出；若问题消失，再逐个恢复阴影定位到具体元素，这种二分排查法在复杂模板中非常高效，值得养成习惯。
下面的按钮用 dompdf.js 在浏览器端实时生成 PDF，无需后端：
这是由 dompdf.js 渲染的示例 PDF 内容。