html5怎么设置半圆_HTML5用border-radius:50%+overflow裁切出半圆形状【设置】

HTML5中创建半圆有五种方法：一、宽高比+border-radius+overflow裁切；二、伪元素+clip-path；三、单边border-radius控制；四、SVG矢量绘制；五、CSS clip-path path()函数。

如果您希望在HTML5中创建一个半圆形状的元素，可以通过组合使用border-radius和overflow属性实现。以下是几种可靠且兼容性良好的设置方法：

一、利用宽高比+border-radius+overflow隐藏裁切

该方法通过设置元素宽高比为2:1（例如宽200px、高100px），再应用border-radius: 50%使整体呈现椭圆，最后用父容器的overflow: hidden截取上半部分或下半部分，从而得到精确的半圆。

1、创建一个外层容器，设置width: 200px、height: 100px、overflow: hidden；

2、在该容器内嵌套一个子元素，设置width: 200px、height: 200px、border-radius: 50%；

立即学习“前端免费学习笔记（深入）”；

3、给子元素添加margin-top: -50px（上半圆）或margin-top: -100px（下半圆），使其垂直偏移后被外层裁切；

4、为子元素设置背景色，确保半圆区域可见。

二、使用伪元素配合绝对定位裁出半圆

该方法不依赖外层容器的overflow，而是通过伪元素::before或::after生成圆形，再用父元素的相对定位与伪元素的绝对定位+clip-path或遮罩式偏移实现半圆视觉效果。

1、给目标元素设置position: relative；

2、添加::before伪元素，设置content: ""、position: absolute、width: 200px、height: 200px、border-radius: 50%、background: #3498db；

3、设置伪元素top: -50px、left: 0，并添加clip-path: inset(50% 0 0 0)仅显示上半部分；

4、若需下半圆，将clip-path改为inset(0 0 50% 0)。

三、纯border-radius单边控制法（适用于水平半圆）

当需要左右方向的半圆（如左半圆或右半圆）时，可直接对元素的左右两侧分别设置不同半径值，配合固定宽高实现，无需额外裁切。

1、设置元素width: 100px、height: 200px；

标签： css html html5 svg 伪元素 浏览器 safari 绝对定位 overflow 相对定位