border-radius: n1 n2 n3 n4 / a1 a2 a3 a4
【n1-a1，n2-a2，n3-a3，n4-a4 分别表示上右下左顺序边角的椭圆边角，其中n代表水平，a代表垂直】
e.g 有趣的小水滴动画（应用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #00a8df;
}
div {
position: relative;
width:100px;
height:100px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5),
-8px -9px 8px rgba(255,255,255,0.4) inset,
-4px -8px 10px rgba(255,255,255,0.6) inset,
-2px -4px 5px rgba(255,255,255,0.4) inset;
border-radius: 45% 55% 40% 60% / 50% 32% 68% 50% ;
animation: aaa 3s ease infinite alternate; /* 设置阴影（外内均设置） */
}
div::after{
position: absolute;/* 设置内部小气泡 */
left:30px;
top:30px;
content:"";
display: block;
opacity: 0.8;
width:10px;
height:10px;
background: #aaa;
border-radius: 100px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5),
-8px -9px 8px rgba(255,255,255,0.4) inset,
-4px -8px 10px rgba(255,255,255,0.6) inset,
-2px -4px 5px rgba(255,255,255,0.4) inset;
}
div::before{
position: absolute;
left:35px;
top:10px;
content:"";
display: block;
width:5px;
height:5px;
opacity: 0.6;
background: #aaa;
border-radius: 100px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5),
-8px -9px 8px rgba(255,255,255,0.4) inset,
-4px -8px 10px rgba(255,255,255,0.6) inset,
-2px -4px 5px rgba(255,255,255,0.4) inset; ;
}
@keyframes aaa{ /* 设置动画变动效果 */
20%{
border-radius:52% 48% 49% 51% / 42% 39% 61% 58% ;
}
50%{
border-radius:61% 39% 59% 41% / 35% 47% 53% 65% ;
}
80%{
border-radius:67% 33% 70% 30% / 29% 57% 43% 71% ;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>得到一个翻涌的动态小水滴：
