CSS圆角生成器

什么是CSS圆角生成器？

如何使用CSS圆角生成器

1. 1

   选择单位：在页面上方单位选择区域，点击选中你需要的尺寸单位，可选的有px、%、rem三种，你可以根据项目规范选择合适的单位。

2. 2

   调整圆角：点击面板上的圆角调整滑块，拖拽滑块即可修改圆角大小，开启统一调整时修改所有圆角，关闭后可单独调整每个角。

3. 3

   预览效果：在页面中部的预览区域，可以实时查看当前圆角参数在实际块元素上的显示效果，调整参数后会自动更新显示。

4. 4

   复制代码：调整到满意效果后，点击底部代码区域的『复制代码』按钮，把生成好的完整CSS border-radius代码拷贝出来，粘贴到你的项目样式文件中即可。

什么场景会用到？

计算示例

注意事项

• 本工具生成的是border-radius标准属性，同时兼容webkit内核浏览器，不需要额外添加前缀的场景可以只保留标准属性。
• 支持px、em、rem三种常用CSS单位，不同单位需对应你的项目样式规范，不要混用单位导致样式异常。
• 四个圆角分别对应左上角、右上角、右下角、左下角，调整时注意对应位置，避免搞反左右顺序。
• 预设效果只提供快速参考，如果你需要自定义半径，请拖动滑块单独调整每个圆角，不要直接依赖预设。

常见问题

参考资料

• W3C CSS Backgrounds and Borders Module Level 3 规范

本工具遵循W3C官方CSS border-radius属性标准，生成的代码兼容主流现代浏览器，所有示例输出都经过实际验证，由工具集前端编辑组维护更新。