盒阴影生成
可视化调 box-shadow：水平垂直偏移、模糊、扩散、颜色与内外阴影，支持叠加多层，实时预览并一键复制 CSS。
>_ 使用指南 · GUIDE
用滑条可视化地调 box-shadow：水平与垂直偏移、模糊半径、扩散半径、阴影颜色，以及 inset 内外阴影开关，右侧实时预览。支持多层叠加，把一层叠一层地调，调好一键复制整段 CSS。
多层阴影是让卡片更自然的关键：与其用一层又大又黑的阴影，不如叠两三层较小的阴影，分别控制模糊与透明度，模拟出接近真实的柔和过渡。inset 会把阴影画在元素内部，注意它的偏移方向与你直觉相反——正向偏移让内部阴影从左上往右下压。颜色建议用带透明度的 rgba，让阴影更细腻、也便于在深浅背景上都好看。
典型步骤：
- 选投影或内阴影：先决定要外阴影还是
inset内阴影 - 拖滑条调参数：调整偏移 X / Y、模糊与扩散
- 取色：设置阴影颜色，推荐带透明的
rgba - 需要时新增一层：点新增叠加第二、第三层阴影
- 复制 CSS：整段
box-shadow一键复制到代码里
>_ 常见问题 · FAQ
Q1 · 多层阴影该怎么写？
多层用逗号分隔，先写的在上层：box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.12);。常见做法是「近处一小层 + 远处一大层」，近层负责贴边细节、远层负责整体纵深，叠起来比单层更接近真实光照。
Q2 · inset 内阴影为什么看着和普通阴影方向相反？
因为 inset 把阴影画在元素内部，视觉上相当于光从相反方向照进来。对外阴影，正偏移把影子投向右下；对 inset，正偏移却是从左上往元素内部压进一圈暗边。调整时把偏移符号反过来试一次通常就对了。
Q3 · 模糊（blur）和扩散（spread）有什么区别？
blur 控制阴影边缘的柔和程度——值越大，边缘越虚；spread 控制阴影在模糊前的整体膨胀或收缩——正值让阴影整体变大，负值让它缩小。想让阴影更「散」用 blur，想让阴影整体更「大」用 spread。
Q4 · 阴影颜色用什么格式？
推荐带透明度的 rgba，例如 rgba(0, 0, 0, 0.15)。用纯色实心阴影往往显得生硬，透明度能让阴影与背景自然融合；深色背景下用较低的黑色透明度、浅色背景下适当提高，观感更稳。
Q5 · 做出来的效果和设计稿对不上怎么办？
先核对设计稿里阴影是几层、每层的偏移 / 模糊 / 扩散 / 颜色与透明度，逐层对照输入。注意设计工具常把阴影坐标与 CSS 的偏移方向对齐，但扩散与模糊可能命名不同，看起来「差一点」多半是这两项，或漏掉了隐藏的第二层。