如何用HTML和CSS轻松画圆？

在网页设计中,使用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>

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

关键细节说明

1. 响应式适配：

   

2. 边框圆环：

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

3. 动画效果（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实现

---

引用说明参考MDN Web文档的CSS基础教程及W3C的CSS背景与边框模块，遵循最新Web标准，实践代码已在Chrome、Firefox、Edge最新版本中验证通过。