border-radius本质是定义四角独立椭圆裁切路径，非单纯圆角；实现水波需overflow:hidden+大椭圆+错位动画+非线性缓动，safari中应避免直接动画border-radius。
border-radius 不是圆角，是“可控形变锚点”
很多人把 border-radius 当成单纯加圆角的工具，但它真正的作用是定义四个角的「独立椭圆裁切路径」。每个角都可以用两个值（水平半径/垂直半径）单独控制，比如 border-radius: 100px / 40px 60px 80px 30px，这会让左上角变成一个横向拉伸、纵向压缩的椭圆切口。水面波动的本质，就是让底部边缘产生周期性起伏——而这个起伏，靠的就是四个角中「底边两角」的非对称、非整圆设定。
为什么必须用 overflow: hidden + 大尺寸容器
单靠旋转一个不规则椭圆，人眼很难感知到“波浪推进感”。真正起作用的是：把一个超宽高的椭圆元素（比如 width: 400px; height: 200px）放进一个窄小容器（比如 width: 200px; height: 60px），再用 overflow: hidden 切掉多余部分。这样，旋转时只有底部边缘的一小段在视口内滑动，视觉上就变成了连续起伏的波线。
- 容器高度决定可见波高，太矮会切掉波峰，太高则波动不明显
- 椭圆宽度至少是容器宽度的 2 倍，否则旋转时会出现“断层”或“跳帧”
- 不要用
transform: rotate()直接转整个元素——它会带动整个坐标系，导致波形偏移；应配合transform-origin锚定底部中心
animation 关键帧里不能只写 rotate
纯 rotate(0deg) → rotate(360deg) 会导致波形在 0° 和 180° 位置出现对称静止点，波动看起来卡顿、机械。真实水波有相位差和弹性衰减，所以关键帧得拆开调：
- 用
@keyframes wave定义三段：0%（起始形变）、50%（最大上凸）、100%（略下压回弹） - 避免使用
linear缓动，改用cubic-bezier(0.3, 0.7, 0.5, 1)模拟水的惯性 - 如果叠加多层波，第二层动画要加
animation-delay: -2s错开相位，否则会完全重叠失效
示例片段：
@keyframes wave {<br> 0% { transform: rotate(-5deg) scaleY(1.02); }<br> 50% { transform: rotate(5deg) scaleY(0.98); }<br> 100% { transform: rotate(-5deg) scaleY(1.02); }<br>}
移动端 Safari 的 border-radius 动画兼容陷阱
iOS 16+ 之前，Safari 对 border-radius 的动画支持极差——不是卡顿，而是直接跳变。这不是 bug，是渲染引擎把 border-radius 当作 layout 属性而非 paint 属性处理。绕过方法只有两个：
- 放弃直接动画
border-radius，改用clip-path: ellipse()配合transform位移（但 iOS 15.4+ 才稳定） - 保持
border-radius固定，只动画父容器的background-position或伪元素的transform（更稳妥）
最常被忽略的一点：哪怕你用了 will-change: transform，Safari 仍可能对 border-radius 变化降级为 repaint。真要保兼容，就别碰它的动画值——把它当静态形变参数用，只动别的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
