预设
box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);
功能说明
设计分层 CSS box-shadow 值，带实时预览和即拷即用的输出。每一层都有五个标准属性 - 水平偏移、垂直偏移、模糊、扩展、颜色 - 外加一个 inset（内阴影）开关，以及一个 0-1 的不透明度滑块，其值在生成时合成进 rgba() 颜色。需要多少层就叠多少层；输出时按顺序用逗号连接，与 CSS 的期望完全一致。
五个一键预设（Soft 柔和、Sharp 锐利、Elevated 悬浮、Inner 内阴影、Glow 发光）会用经过验证的组合替换当前图层 - 单层默认值，外加一个双层的 “Elevated” 叠加。预览舞台把阴影渲染在一个圆角盒子上，盒子颜色由你控制；背景可选纯色、棋盘格或分栏，便于判断不透明度。100% 客户端运行。
使用方法
- 点击工具栏中的预设，从一个已知可用的阴影开始，或者直接编辑初始的柔和图层。Reset（重置）会回到默认的单层柔和阴影。
- 在 Stage（舞台）中，选择预览背景（Plain 纯色 / Checker 棋盘格 / Split 分栏），并用取色器设置盒子颜色。
- 在每个图层区块中调整各个控件：
- Inset（内阴影）- 把阴影画在盒子内部而不是外部。
- Color（颜色）- 该层的基础颜色（取色器，hex）。
- Offset X / Offset Y（偏移）- 位置，单位像素；负值有效。
- Blur（模糊）- 模糊半径，单位像素（最小 0）。
- Spread（扩展）- 放大或收缩阴影；负值让它更收紧。
- Opacity（不透明度）- 0-1 滑块，混合进输出的
rgba()颜色。
- 点击 Add layer（添加图层）再叠一层阴影（例如在宽大的环境阴影下加一层紧贴的接触阴影）。用每个区块上的垃圾桶按钮删除图层 - 最后一层不能删除。
- 边编辑边看实时预览更新。
- 点击 CSS 输出上的 Copy（复制），拿到成品声明。
示例
以下结果由 src/lib/boxShadow.ts 中的 buildBoxShadow() 在五个预设安装的精确图层值上运行验证：
Soft 柔和（也是工具的初始状态）
box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);Elevated 悬浮 - 两层，紧贴接触 + 宽大环境：
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1), 0px 12px 28px -6px rgba(0,0,0,0.28);Inner 内阴影
box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.35);Glow 发光 - 彩色、零偏移的阴影：
box-shadow: 0px 0px 24px 2px rgba(59,130,246,0.45);Sharp 锐利：box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);