当前位置：首页 > CSS

css制作圆

2026-01-08 18:35:16CSS

使用CSS制作圆形元素

通过CSS的border-radius属性可以轻松将元素变为圆形。以下是具体实现方法：

基本圆形实现

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

关键属性说明

width和height必须设置为相同值
border-radius: 50%将矩形元素的四个角全部变为圆弧，形成正圆

动态尺寸圆形

.dynamic-circle {
  aspect-ratio: 1/1; /* 确保宽高比1:1 */
  border-radius: 50%;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

带边框的圆形

.bordered-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid #2c3e50;
  background-color: #ecf0f1;
}

椭圆与半圆变体

/* 椭圆 */
.ellipse {
  width: 160px;
  height: 100px;
  border-radius: 50%;
}

/* 半圆 */
.semi-circle {
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  background-color: #9b59b6;
}

动画效果圆形

.animated-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e74c3c;
  animation: pulse 2s infinite;
}

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

这些方法适用于各种HTML元素，包括div、button等。通过组合不同的CSS属性，可以创建出各种风格的圆形UI元素。

css制作圆