css制作椭圆
使用 border-radius 制作椭圆
通过设置 border-radius 的百分比值，可以将矩形元素变为椭圆。关键是将 border-radius 设置为 50%，并结合宽高比例调整椭圆形状。
.ellipse {
width: 200px;
height: 100px;
background-color: #3498db;
border-radius: 50%;
}- 宽度 > 高度：生成水平方向的椭圆。
- 高度 > 宽度：生成垂直方向的椭圆。
- 宽高相等：生成正圆。
使用 clip-path 制作椭圆
通过 clip-path 的 ellipse() 函数直接定义椭圆形状，参数依次为椭圆的水平半径、垂直半径和中心位置。
.ellipse {
width: 200px;
height: 100px;
background-color: #e74c3c;
clip-path: ellipse(50% 50% at 50% 50%);
}50% 50%：椭圆的水平半径和垂直半径（相对于元素宽高）。at 50% 50%：椭圆中心位置（默认为元素中心）。
使用 SVG 制作椭圆
通过内联 SVG 的 <ellipse> 标签绘制椭圆，可精确控制样式和动画。
<svg width="200" height="100">
<ellipse cx="100" cy="50" rx="80" ry="40" fill="#2ecc71" />
</svg>cx/cy：椭圆中心坐标。rx/ry：水平半径和垂直半径。
响应式椭圆设计
结合 CSS 变量或视窗单位（如 vw/vh）实现自适应椭圆。
.ellipse {
width: 30vw;
height: 20vh;
background-color: #9b59b6;
border-radius: 50%;
}椭圆边框效果
通过 border 和 box-sizing 为椭圆添加边框。
.ellipse {
width: 180px;
height: 90px;
border: 10px solid #f1c40f;
border-radius: 50%;
box-sizing: border-box;
}
