border-radius: 50% 能画标准椭圆，因水平半径=宽×50%、垂直半径=高×50%，宽≠高时两半径不等即成椭圆；斜杠语法（如50%/50%）支持独立控制水平与垂直方向圆角。
直接用 border-radius: 50% 就能画出标准椭圆，前提是元素本身是矩形（width ≠ height）。这不是“技巧”，而是 CSS 原生支持的确定行为，所有现代浏览器都可靠支持。
为什么 border-radius: 50% 能画椭圆
因为 border-radius 的百分比值是分别基于元素宽度（水平方向）和高度（垂直方向）计算的。当设为 50% 时：
- 水平方向圆角半径 =
width * 0.5 - 垂直方向圆角半径 =
height * 0.5 - 只要
width和height不等，这两个半径就不等 → 形成椭圆
例如：width: 240px; height: 120px; border-radius: 50% → 水平半径 120px，垂直半径 60px → 标准横椭圆。
border-radius 中斜杠写法的作用
写成 border-radius: 50% / 50% 和 border-radius: 50% 效果完全一样，但斜杠语法打开了更精细的控制能力：
立即学习“前端免费学习笔记（深入）”；
- 斜杠前是水平半径（可设 1~4 个值），斜杠后是垂直半径（同样 1~4 个值）
- 比如
border-radius: 100% / 50%：整个上边缘拉满成半圆弧，下边缘仍是 50% 椭圆弧 - 再如
border-radius: 50% / 100% 100% 0 0：只让顶部两个角形成完整半椭圆，底部直角 → 半椭圆形状 - 注意：浏览器会自动把单个值扩展为四个（如
50%→50% 50% 50% 50%），斜杠前后必须数量匹配或能合法扩展
自适应椭圆（宽高不固定时）怎么写
当容器内容动态、无法预设 width 和 height 时，硬写像素值会失效。此时必须依赖百分比 + 正确的盒模型约束：
- 确保父容器有明确尺寸，或使用
aspect-ratio（Chrome 88+、Firefox 89+ 支持）强制宽高比，例如：aspect-ratio: 2/1 - 避免用
display: inline-block或浮动导致尺寸塌陷；推荐用display: block+ 显式宽高或aspect-ratio - 慎用
max-width/max-height：它们会截断实际用于计算border-radius百分比的尺寸，导致椭圆变形 - 如果必须响应式，用媒体查询配合不同
border-radius值不如直接改aspect-ratio+ 统一50%稳定
容易被忽略的兼容性与渲染细节
border-radius 画椭圆在 IE9+、Edge 12+、所有现代 Chrome/Firefox/Safari 中完全可用，但有两个真实坑点：
- SVG 中的
<ellipse>是矢量原生椭圆，而 CSS 这个是“带圆角的矩形”，在极细边框（border: 1px）+ 高缩放下，边缘可能轻微锯齿（尤其是 Safari） - 如果元素有
overflow: hidden，且内部内容超出椭圆边界，会被裁剪——这常被误认为“椭圆没生效”，其实是裁剪优先级高于圆角渲染 - 不要试图用
transform: scale()缩放一个已设border-radius的元素来“微调椭圆”，缩放会同时缩放圆角半径，比例关系被破坏
真正需要精确椭圆路径（比如座位排布、动画轨迹）时，该用 SVG 的 <ellipse> 或 CSS 的 offset-path，而不是靠 border-radius “凑”形状。
