预设
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);