当前位置：首页 > CSS

css制作圆圈

2026-02-27 05:05:44CSS

使用 border-radius 属性

通过设置元素的 border-radius 属性为 50%，可以将一个正方形或长方形元素变成一个圆形。元素的宽度和高度必须相等才能形成完美的圆。

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

使用伪元素

伪元素也可以用来创建圆形，尤其是当需要在现有元素上添加装饰性圆形时。

.element::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

使用 SVG

SVG 提供了一种更灵活的方式来绘制圆形，尤其是在需要动态调整或动画效果时。

css制作圆圈

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>

使用 clip-path

clip-path 属性可以裁剪元素为圆形，适用于复杂背景或图像。

.clipped-circle {
  width: 100px;
  height: 100px;
  clip-path: circle(50% at 50% 50%);
  background-color: yellow;
}

使用渐变背景

通过径向渐变可以模拟圆形的视觉效果，适用于背景或装饰性元素。

css制作圆圈

.gradient-circle {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, red 0%, red 50%, transparent 50%);
}

使用 Flexbox 或 Grid 居中

创建圆形后，通常需要将其居中显示。Flexbox 或 Grid 可以轻松实现这一点。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

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

添加边框或阴影

为圆形添加边框或阴影可以增强视觉效果。

.circle-with-border {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: white;
  border: 3px solid black;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}