创建圆形需元素为正方形且border-radius设为50%；创建椭圆则元素为长方形并同样设置border-radius:50%，百分比分别基于宽高计算，形成闭合曲线。
要通过 CSS 的 border-radius 制作圆形和椭圆，关键在于设置元素的边框圆角值，使其四个角的弧度足够大，从而形成闭合的圆或椭圆。前提是元素必须是正方形或长方形，并且有明确的宽度和高度。
制作圆形
要创建一个圆形，需要满足两个条件：
- 元素的宽度和高度相等（即正方形）
- 将 border-radius 设置为宽度或高度的一半，或者直接设为 50%
<div style="width: 100px; height: 100px; background-color: #3498db; border-radius: 50%;"></div>
上面的 div 宽高都是 100px，border-radius: 50% 相当于 50px，刚好让四个角的圆角连接成一个完整的圆。
制作椭圆
要创建一个椭圆，方法类似：
立即学习“前端免费学习笔记（深入）”；
- 元素为长方形（宽高不相等）
- 同样设置 border-radius: 50%
<div style="width: 150px; height: 100px; background-color: #e74c3c; border-radius: 50%;"></div>
由于宽高不同，50% 分别对应水平和垂直方向的一半尺寸，最终形成一个横向或纵向的椭圆。
关键细节说明
border-radius: 50% 是实现圆形和椭圆最常用的方式。百分比是相对于元素的宽度和高度分别计算的：
- 水平方向的圆角半径 = 宽度 × 百分比
- 垂直方向的圆角半径 = 高度 × 百分比
因此，即使你使用不同的百分比组合（如 border-radius: 50% / 50%），只要两个方向都是 50%，就能得到圆或椭圆。
基本上就这些。只要掌握好尺寸和百分比的关系，用 border-radius 制作圆形和椭圆非常简单，无需图片或复杂图形技术。
