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

html如何制作半圆

admin
前端开发
2025-08-13
1

用 div设为圆形（ border-radius:50%），父容器设 overflow:hidden并限制高度为宽度一半

核心思路

制作半圆的本质是通过视觉手段将完整圆形切割为两半，由于HTML本身不具备绘图能力，需结合 CSS样式控制 或 SVG矢量图形 实现，主流方案可分为三类：
1️⃣ 纯CSS方案（推荐）：利用border-radius属性+裁剪技巧；
2️⃣ SVG方案：通过<path>或<circle>元素直接绘制；
3️⃣ Canvas方案：使用JavaScript动态绘制（适用于复杂交互场景）。
本文重点解析前两种通用性强的方案。

纯CSS实现半圆详解

基础原理

通过以下组合达成效果：

width: Xpx; height: Xpx; → 确保元素为正方形（宽高比1:1）；
border-radius: 50%; → 将正方形变为圆形；
overflow: hidden; + 子元素偏移 → 仅显示圆形的一半。

标准代码示例（底部半圆）

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 100px; / 最终显示高度 /
            overflow: hidden; / 关键：隐藏超出部分 /
            position: relative;
        }
        .circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #ff6b6b;
            position: absolute;
            bottom: 0; / 使圆形底部对齐容器 /
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="circle"></div>
    </div>
</body>
</html>

关键参数说明

属性	作用	必要性
`overflow: hidden`	隐藏圆形超出容器的部分
`position: absolute`	允许精确控制圆形位置
`bottom: 0`	将圆形底部贴紧容器底部
`border-radius: 50%`	将正方形转化为圆形

变体扩展

️ 顶部半圆：将.circle的top:0替换bottom:0；
️ 左侧/右侧半圆：修改left/right:0并调整width为原尺寸一半；
️ 带边框的半圆：给.circle添加border属性；
️ 渐变填充：使用background: linear-gradient(...)。

️ 常见误区

忘记设置overflow: hidden → 导致完整圆形显示；
容器高度小于圆形半径 → 半圆变形；
直接对父容器应用border-radius → 无法形成完美半圆。

SVG实现半圆详解

优势对比

特性	CSS方案	SVG方案
清晰度	受像素影响	矢量缩放无损
动画性能	依赖GPU加速	原生矢量动画更流畅
复杂路径支持	不支持	可绘制任意曲线路径
SEO友好性	较差	可被搜索引擎识别

标准代码示例（底部半圆）

<svg width="200" height="100" viewBox="0 0 200 100">
    <!-定义半圆路径：M起点 L终点 A椭圆弧命令 -->
    <path d="M 0,100 A 100,100 0 0,1 200,100 Z" fill="#4ecdc4"/>
</svg>

路径解析

M 0,100：移动到起点(0,100)；
A 100,100 0 0,1 200,100：绘制椭圆弧（半径X/Y均为100，大圆弧标志位0，顺时针方向）；
Z：闭合路径回到起点。

高级技巧

虚线半圆：添加stroke-dasharray属性；
动态旋转：包裹在<g>标签中使用transform="rotate(角度)"；
多色分段：拆分多个<path>元素分别填充。

方案对比表

维度	CSS方案	SVG方案	推荐场景
实现难度	简单布局→CSS；复杂图形→SVG
响应式适配	自动适应容器大小	需配合`preserveAspectRatio`	移动端优先选CSS
动画效果	CSS过渡/关键帧动画	SMIL动画或JS控制	轻量动画→CSS；复杂动画→SVG
兼容性	IE8+需补丁	IE9+原生支持	旧浏览器兼容选CSS
文件体积	极小（纯样式）	较大（XML结构）	性能敏感场景慎用SVG