HTML5中绘制半圆有四种方法：一、用border-radius+overflow-hidden裁剪椭圆；二、单侧border-radius配合固定尺寸；三、clip-path路径裁剪；四、SVG内联绘制，精度最高。

如果您希望在HTML5中绘制一个半圆，可以通过CSS的border-radius属性结合overflow隐藏来实现视觉上的半圆效果。以下是几种可行的方法：

一、使用border-radius和overflow-hidden裁剪出半圆

该方法利用元素宽高比为2:1的矩形，设置border-radius为50%使其变成椭圆，再通过父容器设置overflow:hidden并仅显示上半或下半区域，从而得到半圆。

1、创建一个宽为200px、高为100px的div容器，并设置background-color为蓝色。

2、为该div设置border-radius: 50%，此时呈现为水平拉伸的椭圆。

3、将该div嵌套在一个高度为50px、overflow: hidden的父容器中。

4、通过margin-top调整位置，使椭圆的上半部分完全显示在父容器可视区域内。

5、最终父容器内仅可见上半椭圆，视觉等效于半圆。

二、使用单侧border-radius配合透明背景

该方法不依赖overflow，而是通过设置元素仅一侧的border-radius（如左上、右上），配合固定宽高和背景裁切，形成顶部半圆轮廓。

1、创建一个宽200px、高100px的div，背景设为红色。

2、设置border-top-left-radius: 100px；border-top-right-radius: 100px；其余border-radius为0。

3、确保height严格等于设定的radius值，即100px，且不设置padding或border干扰尺寸。

4、此时顶部边缘呈现平滑弧线，底部为直线，整体构成标准的上半圆形状。

三、使用clip-path路径裁剪生成精确半圆

该方法使用CSS clip-path属性直接定义半圆形路径，兼容现代浏览器，精度高且无需依赖尺寸比例。

1、创建一个正方形div（例如200px × 200px），填充绿色背景。

2、添加样式clip-path: circle(100px at 100px 100px); 实现完整圆。

3、改为clip-path: inset(100px 0 0 0 round 100px); 裁去上半部分，保留下半圆。

4、或使用path()函数：clip-path: path('M0,100 A100,100 0 0,1 200,100 L200,200 L0,200 Z'); 绘制下凸半圆闭合路径。

5、此方式可确保几何意义上的标准半圆，不受盒模型干扰。

四、使用SVG内联绘制半圆

HTML5原生支持SVG，通过svg>标签和或指令可精确控制半圆的起点、终点与方向。

1、在HTML中插入

2、内部添加绘制上半圆弧。

3、若需填充，将fill设为颜色，并将stroke设为none，同时添加L200,100 Z闭合路径形成扇形。

4、SVG方案能保证像素级精度与设备无关的缩放表现。