当前位置：首页 > CSS

css制作曲线

2026-03-12 09:45:48CSS

CSS 制作曲线的方法

使用 border-radius 创建圆角曲线

通过调整 border-radius 属性可以创建圆角或椭圆形曲线。例如，将一个正方形元素的 border-radius 设置为 50% 可以生成一个圆形。

.circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

使用 clip-path 创建自定义曲线

clip-path 允许通过定义路径或基本形状来裁剪元素，从而生成复杂的曲线。可以使用 ellipse、circle 或 polygon 等函数。

.custom-curve {
  width: 200px;
  height: 100px;
  background-color: red;
  clip-path: ellipse(50% 30% at 50% 50%);
}

使用 SVG 或 path 绘制复杂曲线

SVG 的 <path> 元素可以绘制任意曲线，并通过 CSS 控制其样式。例如，可以创建一个贝塞尔曲线。

<svg width="200" height="100">
  <path d="M10 80 Q 100 10, 190 80" stroke="green" fill="transparent" />
</svg>

使用 CSS 渐变生成曲线效果

通过 radial-gradient 或 linear-gradient 可以模拟曲线视觉效果。例如，创建一个径向渐变背景。

.gradient-curve {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at center, blue, transparent 70%);
}

使用 transform 和伪元素生成动态曲线

通过结合 transform 和伪元素，可以生成动态曲线效果。例如，创建一个波浪效果。

css制作曲线

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

.wave::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, blue 50%, transparent 50%);
  border-radius: 50%;
  transform: translateY(50%) rotate(0deg);
  animation: wave 3s linear infinite;
}

@keyframes wave {
  0% { transform: translateY(50%) rotate(0deg); }
  100% { transform: translateY(50%) rotate(360deg); }
}