开发者工具

CSS边框圆角生成器

使用可视化编辑器生成四个角的CSS border-radius值。

在浏览器中处理
推荐工具AI Coding Assistant

GitHub Copilot

AI pair programmer that helps you write code faster with smart suggestions.

免费试用

简介 CSS边框圆角生成器?

CSS圆角生成器让您通过操纵各个角的半径来可视化地创建圆角或复杂的有机形状。它支持简单的统一圆角和高级的非对称值,适用于创意UI元素设计。

使用方法

  1. 拖动各角的控制柄独立调整每个角的半径
  2. 使用链接切换按钮一次性为所有角应用相同半径
  3. 在实时元素预览中查看形状效果
  4. 复制生成的border-radius CSS属性

常见问题

如何用border-radius创建完美圆形?
在一个正方形元素(宽高相等)上将border-radius设为50%即可创建完美圆形,无论元素尺寸如何。
border-radius值中的'/'是什么意思?
斜杠分隔椭圆角的水平和垂直半径。例如,border-radius: 10px / 20px创建垂直方向弯曲更多的角。
可以只对特定角设置圆角吗?
可以,使用四值简写:border-radius: 10px 0 0 10px只对左侧两个角设置圆角。顺序是左上、右上、右下、左下。

相关参考