border-radius 多值过渡无法实现真实水滴形变，因其仅线性插值各角半径，缺乏非对称曲率变化；八值语法可静态拟合水滴轮廓，但复杂动态形变需 svg 或 clip-path 等替代方案。
border-radius 多值过渡本身不能直接做出真实水滴形变——它只是按位置线性插值，而水滴顶部尖、底部延展、两侧略内收，这种非对称曲率变化浏览器原生不支持。
为什么 border-radius: 50% 50% 0 0 动画看起来像倒碗而不是水滴
浏览器把 border-radius 四个值（左上、右上、右下、左下）当作独立数字做线性插值。比如从 50% 50% 50% 50% → 50% 50% 0 0，右下和左下两个角被“削平”，但顶部没变尖、底部没拉长，结果是上圆下平的几何体，缺乏表面张力感。
常见错误现象包括：
- 动画中途边缘生硬，没有弹性回弹感
- 结束态像压扁的胶囊或倒扣碗，不是悬垂水滴
- 用
border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%虽能调出静态水滴轮廓，但直接加transition仍会因插值逻辑失真
用 border-radius 八值语法控制静态水滴轮廓
CSS 支持八值写法：border-radius: h1 v1 h2 v2 h3 v3 h4 v4，即每角分别指定水平半径和垂直半径。这才是调出真实水滴静态形状的关键。
典型水滴轮廓参数（需按比例微调）：
- 顶部曲率大 → 左上/右上水平半径小、垂直半径更小：例如
30% 15% 30% 15% - 底部曲率小且延展 → 右下/左下水平半径大、垂直半径更大：例如
60% 80% 60% 80% - 完整写法：
border-radius: 30% 15% 30% 15% / 30% 15% 60% 80% - 注意：斜杠前是水平半径组，斜杠后是垂直半径组，顺序严格对应左上→右上→右下→左下
用 @keyframes + 八值 border-radius 做晃动/坠落动画
静态调形到位后，才能安全加动画。关键帧里改的是整组八值，不是单个角；否则插值错位更明显。
示例（水滴轻微晃动）：
@keyframes waterWobble {
0%, 100% {
border-radius: 30% 15% 30% 15% / 30% 15% 60% 80%;
}
50% {
border-radius: 35% 10% 25% 10% / 25% 10% 65% 85%;
}
}
要点：
- 所有关键帧必须写满八值，缺一个会导致浏览器 fallback 到四值模式
- 数值变动要克制：顶部垂直半径减小（更尖），底部垂直半径增大（更垂），左右略不对称可增强真实感
- 搭配
transform: translateY()模拟下坠，比只靠border-radius变化更有纵深感 - 避免在同一个
@keyframes里同时大幅改变宽高和border-radius，易引发重排抖动
真正逼真的水滴形变得放弃纯 border-radius
如果要做「水滴将落未落、拉出细颈、突然坠断」这类物理级形变，border-radius 无论几值都做不到——它本质还是圆角矩形的变形，没有贝塞尔锚点控制。
此时必须换思路：
- 用
::before和::after拆成两段：上半部用小圆角+scaleY(0.7)压尖，下半部用大圆角+height拉伸 - 配合
clip-path: polygon()在关键帧中手动定义顶点，实现非圆弧过渡 - 或者直接上
SVG <path></path>+stroke-dasharray动画，控制精度最高
别在八值 border-radius 上死磕「拉丝」「断颈」「溅射」——那是视觉欺骗的边界，跨过去就得换工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
