当前位置：首页 > CSS

css制作椭圆

2026-02-27 08:44:45CSS

使用 border-radius 属性制作椭圆

在 CSS 中，可以通过 border-radius 属性制作椭圆形状。该属性允许为元素的四个角设置不同的圆角半径，从而创建椭圆效果。

.ellipse {
  width: 200px;
  height: 100px;
  background-color: #ff6b6b;
  border-radius: 50%;
}

上述代码中，width 和 height 分别设置为不同的值（宽度大于高度），border-radius 设置为 50%，这样会生成一个水平椭圆。如果高度大于宽度，则会生成一个垂直椭圆。

使用不同的水平和垂直半径

如果需要更精确地控制椭圆的形状，可以为 border-radius 指定两个值，分别表示水平和垂直半径：

.ellipse {
  width: 200px;
  height: 100px;
  background-color: #4ecdc4;
  border-radius: 100px / 50px;
}

这里 100px 是水平半径，50px 是垂直半径。这种写法可以更灵活地调整椭圆的形状。

使用 SVG 制作椭圆

SVG 提供了原生的椭圆元素 <ellipse>，可以直接绘制椭圆：

<svg width="200" height="100">
  <ellipse cx="100" cy="50" rx="80" ry="40" fill="#ffbe76" />
</svg>

cx 和 cy 定义椭圆的中心坐标。
rx 和 ry 分别定义椭圆的水平和垂直半径。
fill 设置椭圆的填充颜色。

使用 clip-path 制作椭圆

CSS 的 clip-path 属性可以通过椭圆函数 ellipse() 裁剪元素为椭圆形状：

.ellipse {
  width: 200px;
  height: 100px;
  background-color: #8395a7;
  clip-path: ellipse(50% 25% at 50% 50%);
}

ellipse(50% 25% at 50% 50%) 表示椭圆的水平半径为 50%，垂直半径为 25%，中心点为 (50%, 50%)。

使用伪元素和变形

通过伪元素和 transform 变形，也可以实现椭圆效果：

css制作椭圆

.ellipse {
  width: 200px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.ellipse::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f368e0;
  border-radius: 50%;
  transform: scaleX(1.5);
}

这里通过 transform: scaleX(1.5) 将圆形横向拉伸为椭圆。