border-radius多值过渡无法实现水滴形变，因其仅按位置线性插值，无法模拟表面张力导致的非对称曲率变化；需用伪元素拆分+clip-path或transform组合实现。
border-radius 多值过渡为什么不能直接实现水滴形变
直接给 border-radius 设置从 50% 50% 50% 50% 到 50% 50% 0 0 的 transition，浏览器会按数值位置逐个插值——但水滴不是“上圆下平”，而是顶部收尖、底部拉长、两侧略内凹。纯多值过渡只能生成圆角矩形之间的线性变形，无法模拟表面张力导致的非对称曲率变化。
常见错误现象：border-radius: 50% 50% 0 0; 动画结束后看起来像倒扣的碗，不是水滴；或者用 border-radius: 50% 50% 20% 20%; 过渡时边缘生硬、无弹性感。
- 浏览器对
border-radius多值插值是按「左上、右上、右下、左下」顺序一对一计算，不理解语义 - 真实水滴顶部曲率大（半径小），底部曲率小（半径大），且左右存在轻微不对称——这需要至少 4 组独立控制点
- CSS 原生不支持贝塞尔曲率锚点，所以必须用 trick 拆解
用两个伪元素 + 不同 border-radius 模拟水滴轮廓
核心思路：把水滴拆成「上半部尖顶」+「下半部延展体」，分别用 ::before 和 ::after 实现，再叠加 transform 控制形变节奏。
示例结构：
立即学习“前端免费学习笔记（深入）”；
.drop {
position: relative;
width: 60px;
height: 80px;
}
.drop::before,
.drop::after {
content: '';
position: absolute;
background: #4a90e2;
}
.drop::before {
/* 上半部：小圆角 + scale 压缩顶部 */
top: 0; left: 50%; transform: translateX(-50%);
width: 40px; height: 40px;
border-radius: 50% 50% 0 0;
animation: drop-top 1.2s ease-in-out infinite;
}
.drop::after {
/* 下半部：大圆角 + vertical stretch */
top: 30px; left: 50%; transform: translateX(-50%);
width: 32px; height: 60px;
border-radius: 0 0 40% 40%;
animation: drop-bottom 1.2s ease-in-out infinite;
}-
::before负责顶部收缩动画，用scaleY(0.6)配合border-radius微调，制造“尖而不破”的张力感 -
::after负责主体延展，border-radius: 0 0 40% 40%让底部更饱满，避免出现直角 - 两个动画的
animation-delay错开 0.15s，能强化“液态延展”的滞后感
用 clip-path 配合 transition 替代 border-radius 过渡
当需要更精确的水滴轮廓（比如从球形→拉长水滴→触底溅散），clip-path 的 inset() 或 path() 更可控。现代浏览器（Chrome 100+、Firefox 102+、Safari 16.4+）已支持 clip-path: path("...") 的 transition。
关键参数差异：
-
clip-path: circle(50% at 50% 50%)→ 球形起点 -
clip-path: path("M30,10 Q50,0 70,10 Q80,30 70,50 Q50,80 30,50 Q20,30 30,10")→ 手绘水滴路径（需用 SVG path 工具生成） - 注意：
path()中坐标单位是像素，必须和元素尺寸严格匹配，否则形变错位 - 若需兼容旧版 Safari，改用
clip-path: polygon(...)+ 多关键帧 animation，但帧数要 ≥ 12 才显平滑
性能与渲染陷阱：哪些写法会让动画掉帧
水滴动画常因重排或层合成失败卡顿，尤其在移动端。以下写法实际测试中 FPS 明显下降：
- 对
width/height做 transition：触发 layout，比transform开销高 3–5 倍 - 在
::before/::after中使用box-shadow+ 动画：每帧重绘阴影缓存，iOS Safari 尤其敏感 -
border-radius值含em或rem：字体大小变化时触发重计算，应统一用px或% - 未加
will-change: transform;：Chrome 对伪元素 transform 的优化不自动启用，需手动提示
最容易被忽略的是：水滴动画若放在 position: fixed 容器里，某些 Android WebView 会禁用 GPU 加速——换用 position: absolute + transform: translateZ(0) 更稳。
