box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
这是一个在浏览器里调 CSS box-shadow 的可视化工具，左边拖滑块、右边实时看效果，改完直接复制代码。它解决的是手写 box-shadow 时记不住参数顺序、调不准模糊和扩散的问题。比如你要给一个 320×180 的卡片加悬浮阴影，手写 box-shadow: 0 4px 12px rgba(0,0,0,.15) 得反复刷新页面试，这里拖 X/Y 偏移到 0/4、模糊 12、透明度 15% 就能看到结果。做按钮按下态、卡片层级、输入框聚焦光圈时都能用，支持一次叠多层阴影和内阴影（inset）。
| 对比维度 | 本工具 | 手工/替代做法 |
|---|---|---|
| 调参耗时 | 拖滑块实时预览，改一组参数约 10-20 秒 | 手写改数值再刷新页面，一组约 1-3 分钟 |
| 多层阴影 | 点按钮叠加，自动用逗号拼接，层数不限 | 手动拼字符串，容易漏逗号或顺序写错 |
| 颜色精度 | 取色器直接选，输出 rgba 带 0-1 透明度 | 凭感觉写 #000 或 rgba，透明度常取整到 0.1 |
| 内阴影支持 | 勾选 inset 即可，预览同步变化 | 需记住 inset 位置，写错会变成外阴影 |
| 代码复制 | 一键复制完整 box-shadow 声明 | 手动选中复制，常漏掉分号或前缀 |
完整语法是 box-shadow: offset-x offset-y blur-radius spread-radius color inset。前两个必填，blur 和 spread 可省略（默认 0），inset 可写在开头或结尾。例如 0 4px 12px 0 rgba(0,0,0,.15) 中，0 是 X 偏移，4px 是 Y 偏移，12px 是模糊，0 是扩散。多个阴影用逗号分隔，先写的在上层。
模糊半径（blur）控制边缘羽化程度，值越大过渡越柔和，0 就是硬边；扩散半径（spread）控制阴影整体缩放，正数向外扩、负数向内收。举例：0 0 10px 0 是四周均匀柔光，0 0 0 4px 是 4px 实心描边效果，0 0 10px -4px 则比元素本身小一圈。两者可同时用。
多半是用了纯黑且透明度太高。rgba(0,0,0,1) 叠在白底上会偏灰，建议透明度降到 0.08-0.2。另一个原因是模糊半径太小而扩散太大，比如 0 2px 2px 4px 会形成硬边块。可以改成 0 2px 8px 0 rgba(0,0,0,.12)，或者用带色阴影如 rgba(15,23,42,.15)。
CSS 规范没有硬性上限，但浏览器解析和渲染有成本。实际项目里 2-3 层足够，比如 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.1), 0 16px 32px rgba(0,0,0,.08)。超过 5 层在低端手机上可能掉帧，且代码可读性变差。每层用逗号分隔，顺序影响叠加结果。
inset 写在颜色前面或后面都行，效果是阴影画在元素内部。典型用法：输入框聚焦 inset 0 0 0 2px #3b82f6，按钮按下 inset 0 2px 4px rgba(0,0,0,.2)。注意 inset 阴影不会超出元素边界，所以 spread 为负时可能完全看不见。内阴影和外阴影可以混在同一条声明里。
不会。box-shadow 不占据文档流空间，也不影响元素尺寸和相邻元素位置，它只是绘制在元素边框外的视觉效果。所以给卡片加 0 8px 24px rgba(0,0,0,.12) 不会把下面的元素挤开。但阴影可能被父元素的 overflow: hidden 裁掉，这时需要给父级留 padding 或改 overflow 值。
本工具生成的 box-shadow 遵循 CSS Backgrounds and Borders Module Level 3 规范，所有主流浏览器（Chrome 1+、Firefox 3.5+、Safari 5.1+、Edge 12+）均支持。预览基于浏览器实际渲染，与最终页面一致。所有计算和预览都在本地浏览器完成，参数不会上传到服务器，关掉页面即清空。