CSS Border Radius Generator 的 Blob 模式究竟生成了什么?

它生成的是 8 值椭圆形 border-radius 语法——四个水平百分比、一个斜杠、再加四个垂直百分比,每个角一对——这是在 CSS 中制作手绘风格有机形状的标准技巧。

CSS Border Radius Generator 能输出百分比或 rem 而不是像素吗?

可以。Simple 和 Per-corner 模式都允许在 px、% 和 rem 单位之间切换,实时预览和生成的 CSS 会立即随之更新。

为什么 Per-corner 模式有时只输出一个数值而不是四个?

当四个角最终数值相等时,工具会自动将 border-radius 折叠为更简短的单值形式——这是有效且等价的 CSS,能让你的样式表更简洁。

CSS Border Radius Generator 会把我的设计或 CSS 上传到任何地方吗?

不会。所有计算和实时预览都在你的浏览器本地运行。你输入的数值和生成的 CSS 永远不会离开你的设备。

Blob 模式中的「随机」按钮有什么用?

它可以一键为全部八个 blob 百分比填入新的随机数值,让你无需手动逐个输入就能快速浏览不同的有机形状变化。

生成的 border-radius CSS 是否被所有现代浏览器支持?

是的。标准的简写形式和 8 值椭圆 blob 语法都属于 CSS Backgrounds and Borders 规范的一部分,能在所有当前主流浏览器中正常运行。

CSS Border Radius Generator 在线工具

通过实时预览创建简单、逐角或不规则形状的 CSS border-radius，一切都在你的浏览器中完成。

CSS Border Radius Generator 完全在你的浏览器中运行。你输入的数值和生成的 CSS 永远不会离开你的设备,也不会上传到 ArrayKit。

打开 Box Shadow Generator

关于 Border Radius 生成器

CSS Border Radius Generator 会生成一段可直接粘贴到样式表中的 border-radius 声明,并配有实时预览框,随着你调整数值即时更新。可在 Simple 模式(四个角统一使用同一个半径)、Per-corner 模式(每个角独立设置圆角)与 Blob 模式(设计师常用来模拟有机、手绘风格形状的 8 值椭圆写法)之间切换。可选择 px、% 或 rem 单位,拖动数值,或在 Blob 模式下点击「随机」按钮,探索一些手动输入很难想到的形状。它适用于按钮、卡片、头像、首屏装饰形状,以及任何需要在确定 CSS 之前精确调整圆角效果的组件。专为希望获得即时视觉反馈的前端开发者和设计师打造。所有计算都在浏览器本地完成——不会上传任何样式或标记。

功能特性

Simple 模式通过一个数值和滑块统一圆滑四个角
Per-corner 模式可独立设置左上、右上、右下、左下四个角
Blob 模式可生成用于有机形状的 8 值椭圆 border-radius
Blob 模式下的一键「随机」按钮,方便快速探索不同形状
Simple 与 Per-corner 半径可在 px、%、rem 单位间切换
正方形实时预览会在每次数值变化时立即更新
一键复制生成的 CSS 声明
完全在浏览器中运行,任何 CSS 都不会被上传

如何使用 Border Radius 生成器

选择 Simple、Per-corner 或 Blob 模式
调整滑块、数值输入框或 blob 百分比
实时查看预览框即时更新的效果
复制生成的 border-radius CSS 声明

示例

输入

all corners 12px

输出

border-radius: 12px;

四个角相等时会合并为一个 border-radius 数值。

常见错误与故障排除

Blob 形状看起来像圆角矩形,而不是有机形状。 — 确保每个角的水平和垂直百分比不同——如果所有角的 H 和 V 值相同,只会生成简单的圆角形状。
逐角设置的 CSS 意外地又合并回单一数值。 — 这是正常现象:当四个角的数值都相等时,CSS Border Radius Generator 会输出更简短的单值写法,而不是重复同一个数字四次。
百分比半径在非正方形元素上表现不同。 — 百分比形式的 border-radius 是相对于元素自身的宽度和高度计算的,因此同一个百分比在宽矩形和正方形上的呈现会不同——请以你实际元素的宽高比进行测试。
非常小的元素上圆角效果消失了。 — border-radius 的最大值受限于元素较短一边的一半,因此在小盒子上设置很大的 px 半径不会溢出,而是直接呈现为胶囊形或完整的圆形。

常见问题

CSS Border Radius Generator 的 Blob 模式究竟生成了什么?: 它生成的是 8 值椭圆形 border-radius 语法——四个水平百分比、一个斜杠、再加四个垂直百分比,每个角一对——这是在 CSS 中制作手绘风格有机形状的标准技巧。
CSS Border Radius Generator 能输出百分比或 rem 而不是像素吗?: 可以。Simple 和 Per-corner 模式都允许在 px、% 和 rem 单位之间切换,实时预览和生成的 CSS 会立即随之更新。
为什么 Per-corner 模式有时只输出一个数值而不是四个?: 当四个角最终数值相等时,工具会自动将 border-radius 折叠为更简短的单值形式——这是有效且等价的 CSS,能让你的样式表更简洁。
CSS Border Radius Generator 会把我的设计或 CSS 上传到任何地方吗?: 不会。所有计算和实时预览都在你的浏览器本地运行。你输入的数值和生成的 CSS 永远不会离开你的设备。
Blob 模式中的「随机」按钮有什么用?: 它可以一键为全部八个 blob 百分比填入新的随机数值,让你无需手动逐个输入就能快速浏览不同的有机形状变化。
生成的 border-radius CSS 是否被所有现代浏览器支持?: 是的。标准的简写形式和 8 值椭圆 blob 语法都属于 CSS Backgrounds and Borders 规范的一部分,能在所有当前主流浏览器中正常运行。