颜色格式转换
转换 HEX、RGB、HSL 与透明度，实时查看色样，并复制可直接使用的 CSS 颜色。
CSS 圆角生成器
联动或独立调整四角半径，预览普通与椭圆圆角并导出 border-radius。
椭圆圆角
预览
CSS
工具介绍
设计按钮、卡片或徽章时，可对照圆形与椭圆圆角的不同效果。
使用说明
选择 px 或 %，拖动滑杆或输入四个角的半径。默认四角联动，取消联动后可分别编辑。展开椭圆圆角并启用独立纵向半径，即可分别调整水平和垂直曲率。
支持 0–500 px 或 0–100%。预览与导出的 border-radius 使用相同数值，可复制或下载 CSS。百分比效果取决于实际元素尺寸；切换单位改变数值的单位含义，不保证视觉尺寸等价。
常见问题
border-radius 中的斜杠表示什么？
斜杠前是水平方向半径，斜杠后是垂直方向半径。圆角发生重叠时，CSS 会按比例缩小半径，使其适应盒子尺寸。
设置 50% 后为什么得到椭圆，而不是圆？
百分比圆角分别按元素的宽和高计算，长方形设为 50% 会成为椭圆，正圆需要宽高相等。想使用固定大小的圆角时可选 px，并在实际元素尺寸上确认效果，不能只按预览图的外观判断。
相关工具
在新标签页打开
评论
0