设计工具
颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
设计工具
CSS 圆角生成器
可视化调节四角圆角并复制 border-radius 代码
工具面板
本地处理关于CSS 圆角生成器
四个角可以独立调节，也能一键联动成统一圆角，单位支持 px 与百分比。预览与复制出来的 CSS 用的是同一份数值，不会出现「看着对、复制出来不对」。
- 1
四角顺序是 CSS 的书写顺序：左上、右上、右下、左下；联动时输出一个值，取消联动则按这个顺序输出四个值。
- 2
百分比的上限是 50%：单角超过 50 之后相邻两角已经各占一半、视觉上不再变化，所以工具把上限设在这里；像素单位的上限是 120。
- 3
切换单位会把超过上限的值压回来（120px 原样搬成百分比就是整块圆角），避免切一下单位样式就变形。
- 1
拖圆角
默认四角联动，拖任意一角其余跟着走；取消勾选后可以单独调某一角。
- 2
选单位
px 适合固定尺寸的卡片，% 适合会随尺寸变化的容器（圆形头像常用 50%）。
- 3
复制 CSS
拿到的是 `border-radius` 一行，直接贴进样式表。
一个角的半径最多只能吃掉相邻两个方向的各一半空间，超过之后浏览器渲染结果不再变化——所以 50% 与 100% 看起来完全一样。工具把上限设在视觉停止变化的地方，免得你继续拖却看不到反馈。
本工具生成的是「四角半径」这一种写法（每个角的水平与垂直半径相同）。CSS 还有一种两段式写法 `border-radius: 水平 / 垂直` 可以做椭圆角，这里不生成——需要时在复制出来的 CSS 上手工补第二段。
相关工具
查看全部设计工具
颜色对比度
检查前背景色对比是否符合的可访问性标准
设计工具
设计工具
渐变色生成器
可视化创建漂亮的 CSS 线性或径向渐变
设计工具
设计工具
CSS 阴影生成器
可视化调节并复制 box-shadow 代码
设计工具
设计工具
单位换算
各领域物理单位的精准换算
设计工具
设计工具
字节转换
在 B, KB, MB, GB, TB 间进行转换
设计工具
设计工具
CSS 裁剪路径生成器
拖动顶点调整形状，复制 clip-path: polygon() 代码
设计工具
设计工具
CSS 缓动函数生成器
拖动控制点编辑 cubic-bezier 曲线，复制缓动代码
设计工具