水滴形按钮需用非对称 border-radius（如24px 24px 12px 12px）模拟头大尾细轮廓，配合内/外多层 box-shadow 实现透光厚度，:active 状态通过 translateY+scaleY 及收缩下部圆角强化按压感，背景用垂直渐变、文字阴影轻柔。
button 的 border-radius 要设多大才像水滴？
水滴形按钮的核心是顶部圆润、底部略收窄的非对称弧度，不能只用单一 border-radius 值。纯圆形（border-radius: 50%）看起来像球，不是水滴；全用相同像素值（如 border-radius: 12px）则太呆板。
真正接近水滴轮廓的做法是分角控制：
-
border-radius: 24px 24px 12px 12px—— 上边两个角大弧度，下边两个角小弧度，形成“头大尾细”感 - 若按钮宽高比偏高（比如 80×120px），可进一步压缩下部：例如
border-radius: 30px 30px 8px 8px - 避免使用
%单位，因为不同宽高下百分比会失真；优先用px或rem保证比例稳定
怎么用 box-shadow 模拟水滴的透光与厚度？
单层阴影（如 box-shadow: 0 4px 12px rgba(0,0,0,0.2)）只能出浮雕感，水滴需要「上亮下暗+边缘柔光」的叠加效果。
推荐组合写法：
立即学习“前端免费学习笔记（深入）”；
- 内阴影模拟高光：添加
inset 0 2px 6px rgba(255,255,255,0.7)，让顶部有泛白反光 - 外阴影分两层：先一层浅色扩散（
0 2px 4px rgba(0,0,0,0.08)），再一层深色压重（0 6px 16px rgba(0,0,0,0.18)），模拟水滴底部聚光衰减 - 不要省略
transition：加transition: box-shadow 0.2s ease-out，悬停时阴影自然延展，更像液体质感
:active 状态下必须调整哪些属性才能强化水滴按压感？
点击时如果只变色或缩放，会丢失水滴特有的「表面张力变形」错觉。关键不是动得快，而是动得“软”。
实操要点：
- 取消
transform: scale()—— 它会让按钮整体收缩，不像水滴受压后顶部隆起、底部摊开 - 改用
transform: translateY(2px) scaleY(0.96)：轻微下移 + 纵向微压，保留横向饱满感 - 同步收紧下部
border-radius：例如从24px 24px 12px 12px变为24px 24px 6px 6px，模拟液面被压扁 - 阴影要「沉下去」：把外阴影的垂直偏移加大（如
0 8px），内阴影透明度降低（rgba(255,255,255,0.4)），营造凹陷感
渐变背景和文字阴影如何配合水滴形态？
水滴是半透明介质，所以背景渐变不能生硬，文字阴影也不能机械套用黑影。
具体搭配建议：
- 背景用垂直线性渐变：
background: linear-gradient(to bottom, #a0e7e5, #6a98c9)，上浅下深，模仿水面到水体的光学过渡 - 禁用纯色
background-color，否则失去通透感；也别用径向渐变，它容易显得像气泡而非水滴 - 文字阴影只用一层：
text-shadow: 0 1px 2px rgba(0,0,0,0.15)，偏移极小、模糊轻柔——水滴折射文字时不会产生锐利投影 - 如果按钮内容是图标（如
❄），可额外加filter: drop-shadow(0 1px 1px rgba(255,255,255,0.3))模拟边缘光晕
最易被忽略的是：水滴按钮在小尺寸（width ）下，<code>border-radius 和 box-shadow 的像素级数值必须同比例缩减，否则弧度会糊成一团，阴影会盖住整个按钮。调试时务必在真实设备像素比下预览。
