css制作半圆教程

使用CSS制作半圆的方法

通过CSS的border-radius属性可以轻松实现半圆效果，以下是几种常见方法：

基础半圆（水平或垂直方向）

.half-circle {
  width: 100px;
  height: 50px; /* 高度是宽度的一半 */
  background: #ff6b6b;
  border-radius: 50px 50px 0 0; /* 上左/上右圆角 */
}

这段代码会创建一个上半圆。将border-radius改为0 0 50px 50px可得到下半圆。

左右半圆

.left-half-circle {
  width: 50px;  /* 宽度是高度的一半 */
  height: 100px;
  background: #4ecdc4;
  border-radius: 50px 0 0 50px; /* 左半圆 */
}

.right-half-circle {
  border-radius: 0 50px 50px 0; /* 右半圆 */
}

使用伪元素创建精确半圆

.circle-mask {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.circle-mask::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ff9f1c;
  border-radius: 50%;
  clip-path: inset(0 0 50% 0); /* 裁剪下半部分 */
}

SVG替代方案

<svg viewBox="0 0 100 50" width="100" height="50">
  <path d="M 0,50 A 50,50 0 0,1 100,50 Z" fill="#2ec4b6"/>
</svg>

注意事项

• 确保元素的宽高比例正确（水平半圆高度=宽度/2，垂直半圆宽度=高度/2）
• 现代浏览器支持border-radius百分比值，但固定像素值更稳定
• 需要兼容旧浏览器时可配合-webkit-和-moz-前缀使用
• 使用clip-path能创建更复杂的半圆切割效果