当前位置：首页 > 前端开发 > 正文

如何用HTML和CSS轻松画圆？

admin
前端开发
2025-07-04
2684

使用CSS的border-radius属性创建圆形：将元素的宽度和高度设为相同值，设置border-radius:50%即可实现完美圆形，例如div{width:100px;height:100px;border-radius:50%;}

在网页设计中,使用HTML和CSS绘制圆形是常见需求，以下是三种专业可靠的方法，遵循W3C标准并确保跨浏览器兼容性：

使用CSS border-radius属性（最常用）

<div class="circle"></div>

.circle {
  width: 200px;          /* 直径尺寸 */
  height: 200px;         /* 宽高必须相等 */
  border-radius: 50%;    /* 关键属性：50%创建正圆 */
  background: #3498db;   /* 填充颜色 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 可选：添加投影 */
}

原理：border-radius: 50% 将矩形四个角弯曲成最大曲率，当元素宽高相等时形成完美正圆。

使用SVG（矢量图形）

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#e74c3c" />
</svg>

cx/cy：圆心坐标（100,100）
r：半径80px
优势：矢量图形无限缩放不失真，适合复杂图形

CSS渐变（创意圆环）

.ring {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(
    #9b59b6 0deg 180deg, 
    #2ecc71 180deg 360deg
  );
}

<div class="ring"></div>

此方法创建双色渐变圆环,可通过调整角度值实现饼图效果。

关键细节说明

响应式适配：

.responsive-circle {
  width: 20vw;        /* 视窗宽度单位 */
  aspect-ratio: 1/1;  /* 锁定宽高比1:1 */
}

边框圆环：

.hollow-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 8px solid #f39c12; /* 实心边框 */
  background: transparent;   /* 透明填充 */
}

动画效果（CSS动画）：

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 0.3; }
}
.animated-circle {
  animation: pulse 1.5s infinite alternate;
}

浏览器兼容性建议

所有现代浏览器均支持border-radius（IE9+）
SVG兼容IE9+，移动端全支持
使用aspect-ratio时需注意Safari 14+支持

动画属性添加前缀增强兼容性：

-webkit-animation: pulse 1.5s infinite alternate; /* Safari/Chrome */

选择建议

方法	适用场景	优势
border-radius	纯色/渐变圆形	性能最佳，控制灵活
SVG	复杂图形/需要缩放	矢量特性，XML结构清晰
CSS渐变	饼图/彩色圆环	无额外元素，纯CSS实现