CSS border-radius 无法绘制数学意义上的椭圆，因其仅支持圆弧而非独立控制x/y半轴的椭圆；它可通过单角斜杠语法（如border-top-left-radius:40px/20px）或药丸形设计（height与border-radius匹配）实现视觉近似，但精确椭圆需用clip-path或SVG。
直接说结论：CSS border-radius 本身不能绘制数学意义上的椭圆，但能通过合理设置四个角的值模拟视觉上“平滑拉伸”的椭圆或药丸形按钮；真要画精确椭圆，得换 SVG 或 clip-path。
为什么 border-radius 画不出真正椭圆？
CSS 的 border-radius 只支持圆弧（即固定半径的圆的一部分），每个角只能指定一个或两个长度值，最终渲染的是四段同心圆弧拼接——它没有椭圆所需的 x/y 半轴独立控制能力。所以当你写 border-radius: 50%，浏览器实际是把宽高各自当作直径去算圆半径，若容器不是正方形，结果就是“被拉扁的圆”，而非标准椭圆。
常见误解场景：
- 给一个
width: 200px; height: 60px;的按钮设border-radius: 50%;→ 看起来像药丸，但上下边是圆弧，左右边其实是“水平拉伸过的圆弧”，严格来说是超椭圆近似，不是几何椭圆 - 设
border-radius: 30px / 15px;（斜杠语法）→ 这是椭圆语法！但仅适用于单个角，且必须成对出现（如border-top-left-radius: 30px / 15px;），不能直接用在简写border-radius上
药丸按钮：用 border-radius 最稳妥的做法
药丸形 = 高度固定、左右两端为半圆、中间矩形。核心是让水平方向的圆角半径等于高度的一半。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 确保元素有明确的
height（比如height: 44px;），且不依赖内容撑开 - 设
border-radius: 22px;（即height / 2），左右两端自动变成半圆 - 如果按钮内有文字，加
line-height: 44px;或用display: flex; align-items: center;垂直居中 - 避免用百分比（如
border-radius: 50%;），因为当父容器宽度变化时，50%会随宽度变，导致药丸变形
示例：
.pill-btn {
height: 44px;
border-radius: 22px;
padding: 0 24px;
border: none;
background: #007aff;
color: white;
font-size: 16px;
}
想逼近视觉椭圆？试试 border-radius 斜杠语法 + 精确控制
虽然不能全局画椭圆，但可以分角设置「水平半径 / 垂直半径」，实现单角椭圆弧。例如：
-
border-top-left-radius: 40px / 20px;→ 左上角是横向 40px、纵向 20px 的椭圆弧 - 四个角分别设不同值，就能做出非对称的类椭圆轮廓（比如顶部更扁、底部更鼓）
- 注意：斜杠语法只在单独设置某一个角时生效；
border-radius: 40px / 20px;是无效的，会整体回退为border-radius: 40px; - 兼容性没问题（Chrome 4+、Firefox 4+、Safari 5.1+ 都支持），但别指望它在旧 IE 生效
典型误用：
写 border-radius: 30px / 15px; 期望整个框变椭圆 → 实际只生效第一个值 30px，斜杠后被忽略
真要画数学椭圆？绕过 border-radius，用 clip-path 或 SVG
当设计稿明确要求椭圆（比如长轴 120px、短轴 40px），或需要响应式缩放仍保持椭圆比例时，border-radius 就力不从心了。
替代方案对比：
-
clip-path: ellipse(60px 20px at center);→ 简洁，支持百分比和 calc()，现代浏览器全支持（Edge 79+），但不支持 IE - 内联 SVG：
<svg viewBox="0 0 120 40"><ellipse cx="60" cy="20" rx="60" ry="20"/></svg>→ 100% 精确，可样式化，适合图标类小椭圆 - 绝对不要用
border-radius+ 宽高不等 +50%去“凑”椭圆，尤其在需要动画或高精度对齐的场景下，边缘像素会发虚或错位
药丸按钮用 border-radius 没问题，但它的“完美”是工程妥协后的视觉一致；真椭圆不是它该干的活——边界在哪，得看设计师给的标注里写的是“药丸”还是“ellipse”。
