当前位置：首页 > CSS

css制作圆形教程

2026-04-02 03:38:09CSS

使用CSS制作圆形的方法

使用`border-radius`属性

通过设置border-radius为50%可以将元素变为圆形。元素的宽度和高度必须相等。

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

使用`clip-path`属性

clip-path可以裁剪元素为圆形，但兼容性不如border-radius。

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

使用SVG内联

直接在HTML中嵌入SVG代码，可以创建完美的圆形。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="#2ecc71"/>
</svg>

使用伪元素

通过伪元素和border-radius结合，可以在其他元素上添加圆形装饰。

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

响应式圆形

使用padding-bottom和百分比宽度创建响应式圆形，保持宽高比。

.responsive-circle {
  width: 20%;
  padding-bottom: 20%;
  border-radius: 50%;
  background-color: #9b59b6;
}

圆形的高级效果

添加阴影

为圆形元素添加box-shadow可以创建深度效果。

.circle-with-shadow {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #1abc9c;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

渐变填充

使用linear-gradient或radial-gradient为圆形添加渐变背景。

.gradient-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, #3498db, #2c3e50);
}

圆形边框

设置border属性可以为圆形添加边框，注意计算总尺寸。

.bordered-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 5px solid #e67e22;
  background-color: #f39c12;
}

圆形动画效果

旋转动画

使用CSS动画让圆形旋转。

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinning-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #d35400;
  animation: spin 2s linear infinite;
}

脉冲效果

创建圆形大小变化的脉冲动画。

css制作圆形教程

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.pulsing-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #27ae60;
  animation: pulse 1.5s ease-in-out infinite;
}