设计配色

高级边框圆角生成器

通过直接拖拽或输入参数,可视化生成 CSS 的 8 点不规则圆角(Fancy Border Radius)代码。

CSS圆角设计

收藏工具

当前还没有选择收藏模式。

快捷操作

返回设计配色 浏览全部工具

你可以复制当前工具页链接,或在支持的设备上调用系统分享。

设计配色

圆角生成器

使用场景

  • 有机形状卡片
  • 动态变形按钮
  • 特殊 UI 装饰

如何使用

  1. 移动独立滑块控制各点弧度
  2. 或切换到 8 点展开模式
  3. 复制 border-radius 代码

示例输入输出

操作

开启独立控制

CSS

border-radius: 40% 60% 70% 30% / 30% 30% 70% 70%;

FAQ

斜线 / 的作用是什么?

CSS border-radius 的 / 可分别定义水平半径和垂直半径,以产生不规则椭圆。

工具列表

相关推荐

你可以从这里继续打开相近场景的工具,减少重复搜索。

CSS 阴影生成

CSS 阴影生成 - box-shadow 可视化工具

可用

可视化调节偏移、模糊、扩散、颜色、透明度和内阴影,实时预览并生成 box-shadow CSS,适合卡片、按钮和浮层阴影调试。

CSS 阴影 box-shadow

毛玻璃效果生成

毛玻璃效果生成 - backdrop-filter 工具

可用

可视化调节模糊、透明度、背景色与边框透明度,生成带 webkit 前缀的毛玻璃 CSS,适合卡片、导航栏与模态层样式。

CSS 毛玻璃 backdrop-filter