css制作半圆教程

使用CSS制作半圆的方法

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

基础半圆（水平或垂直）

将元素的宽度和高度设置为2:1的比例，并设置border-radius为100%：

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

这会创建一个朝上的半圆。修改border-radius的值可调整方向：

• 朝下：0 0 100px 100px
• 朝左：100px 0 0 100px
• 朝右：0 100px 100px 0

使用伪元素创建半圆

通过::before或::after伪元素实现更灵活的半圆：

.element::before {
  content: "";
  display: block;
  width: 80px;
  height: 40px;
  border-radius: 0 0 80px 80px;
  background: linear-gradient(to right, #ff758c, #ff7eb3);
}

带边框的半圆

结合border属性创建有描边的半圆：

.bordered-half-circle {
  width: 120px;
  height: 60px;
  border: 4px solid #4ecdc4;
  border-bottom: 0;
  border-radius: 120px 120px 0 0;
}

动态比例半圆

使用CSS变量实现可调整比例：

:root {
  --radius: 150px;
}
.dynamic-half-circle {
  width: var(--radius);
  height: calc(var(--radius) / 2);
  border-radius: var(--radius) var(--radius) 0 0;
  background: #a5ffd6;
}

注意事项

• 确保父容器有足够空间，避免半圆被裁剪
• 考虑使用overflow: hidden控制显示范围
• 通过transform: rotate()可以旋转半圆角度
• 结合box-shadow可添加投影效果增强立体感

这些方法均可通过调整参数实现不同大小、颜色和方向的半圆效果。