css制作半圆教程

使用CSS制作半圆的方法

通过border-radius属性实现

设置一个正方形的元素，通过border-radius属性将两个角设置为圆形，另外两个角保持直角。例如，制作一个上半圆：

.half-circle {
  width: 100px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50px 50px 0 0;
}

制作下半圆：

.half-circle {
  width: 100px;
  height: 50px;
  background-color: #3498db;
  border-radius: 0 0 50px 50px;
}

使用clip-path属性

clip-path属性可以裁剪元素的显示区域，直接裁剪出半圆形：

.half-circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  clip-path: circle(50% at 50% 0);
}

通过transform和overflow实现

结合transform和overflow属性，旋转一个圆形并隐藏一半：

.half-circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  overflow: hidden;
}

.half-circle::after {
  content: '';
  display: block;
  width: 100%;
  height: 50%;
  background-color: #fff;
  transform: translateY(100%);
}

使用SVG实现

虽然这不是纯CSS方法，但SVG可以轻松创建半圆：

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

每种方法都有其适用场景，border-radius方法简单直接，clip-path方法灵活但兼容性稍差，transform方法适合动态效果，SVG方法适合复杂图形。