html怎么表示圆圈

admin 2026年02月14日 13:42 101 0

HTML中表示圆圈主要通过CSS或SVG实现，CSS方法：创建一个正方形元素（如），设置宽高相等，并通过border-radius:50%将其转换为圆形，，SVG方法：使用标签，指定圆心坐标（cx、cy）和半径（r），如`，CSS适合简单静态圆圈，SVG更适合复杂图形或动态场景，两者均需配合HTML标签使用。

HTML中表示圆圈的几种方法

在网页开发中，圆圈是一种高频使用的视觉元素，广泛应用于按钮设计、用户头像、进度指示器、装饰图标等场景，虽然HTML本身没有专门的"圆圈"标签，但通过CSS样式或SVG矢量图形可以灵活实现，本文将系统介绍几种主流实现方案,涵盖不同应用场景和技术特点。

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

border-radius是CSS中用于设置元素圆角的核心属性，当其值设为50%时，若元素宽高相等，则生成正圆；若宽高不等，则自动形成椭圆，这种方法凭借其简洁性和灵活性，成为实现圆圈的首选方案，尤其适合静态装饰、动态按钮和响应式布局。

实现步骤

创建基础元素：使用<div>、<span>或<button>等块级/行内块元素作为容器。
设置核心样式：通过width和height定义尺寸，border-radius: 50%强制圆形化，再结合background-color（填充色）或border（边框）实现视觉效果。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        /* 实心圆 */
        .solid-circle {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            border-radius: 50%;
        }
        /* 空心圆 */
        .hollow-circle {
            width: 120px;
            height: 120px;
            border: 5px solid #e74c3c;
            border-radius: 50%;
            background-color: transparent;
        }
        /* 椭圆效果 */
        .ellipse {
            width: 150px;
            height: 80px;
            background-color: #2ecc71;
            border-radius: 50%;
        }
        /* 进度环应用示例 */
        .progress-ring {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: conic-gradient(#3498db 0deg 216deg, #f1f1f1 216deg);
        }
    </style>
</head>
<body>
    <h3>实心圆圈</h3>
    <div class="solid-circle"></div>
    <h3>空心圆圈</h3>
    <div class="hollow-circle"></div>
    <h3>椭圆效果</h3>
    <div class="ellipse"></div>
    <h3>进度环应用</h3>
    <div class="progress-ring"></div>
</body>
</html>

关键技巧

尺寸控制：确保width和height值严格相等,否则会自动生成椭圆。
边框与填充：通过border调整边框粗细和颜色，设置background-color: transparent实现空心效果。
响应式适配：使用vw/vh单位（如width: 10vw）或clamp()函数实现动态缩放。
进阶应用：结合box-shadow添加阴影，或使用conic-gradient创建进度环。

使用SVG的`<circle>`元素（矢量图形方案）

SVG（可缩放矢量图形）提供原生<circle>元素，可直接定义圆心坐标、半径和样式，该方法适合需要精确控制、高分辨率输出或复杂动画的场景，如品牌Logo、数据可视化图表等。

核心属性

cx：圆心在画布中的X轴坐标
cy：圆心在画布中的Y轴坐标
r：圆的半径值
fill：填充颜色（设为none则无填充）
stroke：边框颜色，stroke-width：边框粗细

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        svg { border: 1px solid #ddd; }
        .circle-group { transition: all 0.3s ease; }
        .circle-group:hover circle { r: 35; }
    </style>
</head>
<body>
    <h3>基础实心圆</h3>
    <svg width="120" height="120">
        <circle cx="50" cy="50" r="30" fill="#3498db" />
    </svg>
&lt;h3&gt;带边框的空心圆&lt;/h3&gt;
&lt;svg width="150" height="150"&gt;
    &lt;circle cx="70" cy="70" r="40" fill="none" stroke="#e74c3c" stroke-width="3" /&gt;
&lt;/svg&gt;
&lt;h3&gt;渐变填充圆&lt;/h3&gt;
&lt;svg width="120" height="120"&gt;
    &lt;defs&gt;
        &lt;radialGradient id="gradient"&gt;
            &lt;stop offset="0%" stop-color="#ff7eb3"/&gt;
            &lt;stop offset="100%" stop-color="#7afcff"/&gt;
        &lt;/radialGradient&gt;
    &lt;/defs&gt;
    &lt;circle cx="50" cy="50" r="30" fill="url(#
		    	
        	        		标签：        		    #radius
        		        		    #SVG circle