0

边界半径生成器

直观地设计 CSS 边框半径:四个独立的角滑块(以 px 或百分比表示)、用于即时圆圈和药丸的链接所有角的快捷方式,以及具有随机形状的有机斑点模式。

12px
12px
12px
12px
处理中... 0%

结果

边框半径声明最多可以采用四个独立的角值以及用于有机曲线的可选八值斜线语法 - 比大多数人意识到的移动部分要多,直到他们需要的不仅仅是简单的圆形卡片之外的东西。该生成器将这些部分中的每一个都放在屏幕上:具有自己的 px 或百分比单位的四个角滑块、对称形状的链接所有角快捷方式以及单个半径值无法表达的形状的斑点模式。

角模式涵盖了人们实际想要的形状:将每个角链接到一个滑块以形成完美的圆形、丸状和方圆形,或者取消链接以仅将下拉面板的顶部或卡片的一侧制成圆形。形状后面的棋盘预览可在浅色和深色背景之间切换,可以清楚地看出哪些角在任何半径处被剪掉——该网站上的视觉技巧文件工具用于显示透明度。

Blob 模式是另一半:CSS 八值斜线语法让每个角的水平和垂直半径不一致,这就是将圆角矩形变成有机的、不规则轮廓的原因。随时点击“随机化”以获得新形状并复制其背后的确切 CSS - 无需 SVG 导出或外部库。预设页面涵盖了人们在搜索框中实际输入的请求:一个完美的圆形、一个体育场形状的药丸按钮、一个 iOS 风格的方格和一个现成的有机斑点。

与该网站上的每个工具一样,它完全在您的浏览器中运行:无需上传,无需帐户,并且一旦页面加载,生成器就会继续离线工作。