CSS 阴影与圆角
调整多层阴影,并可同时输出独立角的圆角样式。
浏览器本地处理输入参数输出CSS
- 1添加输入
- 2调整设置
- 3获取结果
工具输入和文件在当前浏览器处理,不会上传。
开始之前
调整多层阴影,并可同时输出独立角的圆角样式。依据 x、y、模糊、扩展、颜色和内阴影参数生成最多五层阴影。预览使用与复制结果相同的 CSS。
如何使用
- 设置已有阴影层的颜色、偏移、模糊和扩展;需要时可再添加阴影,最多五层。
- 按需开启圆角并设置关联或独立的四个角,再生成 CSS。阴影层下方的 JSON 编辑框可选用。
- 查看 CSS 结果,确认无误后使用结果区提供的复制或下载操作。
支持范围与限制
粘贴文本最多 1 MiB;处理后请核对结果。
操作示例
示例输入
[{"x":1,"y":2,"blur":3,"spread":0,"color":"#0008"}]示例参数
{}示例输出
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.533333);
出现问题时
请使用已说明的输入格式,并遵守界面限制。用于其他文档或应用前请复核结果。修改输入会将旧结果标为已过期;运行失败会清除旧结果。
常见问题
我的文件会上传吗?
不会。文件和工具输入在当前浏览器处理;站内切换可在同一标签页暂存工作状态。刷新或关闭标签页后无法恢复,请及时下载需要保留的结果。
需要检查结果的哪些方面?
依据 x、y、模糊、扩展、颜色和内阴影参数生成最多五层阴影。预览使用与复制结果相同的安全 CSS。