无需登录 数据私有 本地保存

有机形状/气泡生成器 - CSS border-radius 不规则圆形

CSS 设计工具 border-radius CSS 形状 气泡
18
0
0
0
CSS 代码
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
预设形状
形状大小
水平曲率 (Horizontal)
垂直曲率 (Vertical)
填充样式

常见问题

什么是有机形状（Blob）？它是如何用CSS实现的？
有机形状（Blob）是一种不规则、类似气泡或液滴的圆润形状。它通过CSS border-radius的8值语法实现：border-radius: h1 h2 h3 h4 / v1 v2 v3 v4;，其中前4个值控制水平方向曲率，后4个值控制垂直方向曲率。当水平和垂直曲率不对称时，就会产生自然、有机的不规则圆形效果，广泛用于现代Web设计中的装饰元素、头像背景、卡片装饰等场景。
border-radius 的8值语法是什么？浏览器兼容性如何？
8值语法格式为：border-radius: 左上水平 右上水平 右下水平 左下水平 / 左上垂直 右上垂直 右下垂直 左下垂直;。斜杠/前后各4个值，分别控制每个角的水平和垂直曲率半径。这种写法兼容所有现代浏览器（Chrome、Firefox、Safari、Edge均支持），IE已不支持此语法。对于需要兼容旧版浏览器的项目，建议使用百分比值并做好渐进增强。
如何给有机形状添加动画效果？
使用CSS @keyframes在不同关键帧之间变换border-radius值即可创建"呼吸"或"流动"动画。本工具生成的动画代码会在4秒内循环变换形状。你也可以手动编写keyframes，在0%、25%、50%、75%、100%等关键帧设置不同的border-radius值。配合animation-duration和animation-timing-function可以调整动画的速度和缓动曲线。
有机形状在实际项目中有哪些应用场景？
有机形状广泛应用于：① Hero区域背景装饰——增加页面视觉层次感；② 头像/用户头像容器——比正圆形更有趣；③ 卡片和模态框——柔和的边缘让UI更友好；④ 品牌Logo背景——独特形状增强品牌识别；⑤ 加载动画——配合动画效果可作为loading指示器；⑥ 引用块和提示框——让信息展示更生动。结合渐变背景和柔和阴影，效果尤为出色。
生成的CSS代码如何集成到项目中？
直接复制生成的border-radius属性到你的CSS类中即可。建议同时设置元素的width和height（通常相等或接近）。如需动画，复制完整的@keyframes定义和animation属性。如果使用渐变背景，确保background属性正确设置。推荐搭配box-shadow增加深度感，例如：box-shadow: 0 20px 60px rgba(99,102,241,0.3);。
如何让形状响应鼠标交互或滚动？
可以使用JavaScript监听鼠标移动或滚动事件，动态修改border-radius值。例如，根据鼠标在元素内的相对位置微调各角的曲率，产生"跟随"效果。也可以使用CSS的:hover伪类配合transition实现悬停变形。更高级的实现可使用CSS Houdini或GSAP动画库来创建更复杂的交互动画。
CSS 已复制到剪贴板
🔧 相关工具