css怎么做半圆

1. 介绍

半圆是常用的一种形状，可以用在很多地方。在CSS中，实现半圆可以用到很多技巧，这篇文章将带你了解几种实现半圆形状的方法。

2. 用border-radius实现半圆形状

2.1 用border-radius实现圆形

在使用border-radius实现半圆之前，我们先来了解一下怎样使用border-radius实现圆形。

在CSS中，我们可以使用border-radius属性来设置元素的圆角。设置为50%即可实现圆形。

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

效果如下：

2.2 使用border-radius和宽度高度实现半圆形状

接下来我们来使用border-radius和宽度高度实现半圆形状。首先我们需要将元素的宽度设为高度的两倍，这样我们才能将元素设置为一个半圆。

同时，我们需要使用border-top-right-radius和border-top-left-radius来实现半圆形状。这两个属性用于设置元素的顶部左右两个角的圆角。

.half-circle{
  width: 100px;
  height: 50px;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}

效果如下：

注意：这种方法仅适用于半圆形状，如果需要实现其他角度的圆角，可以使用border-radius属性。

3. 用伪元素实现半圆形状

除了使用border-radius，还可以使用伪元素来实现半圆形状。

在这种方法中，我们使用一个空元素(::before或::after)来添加一个半圆形状。我们可以将该元素设置为块级元素，并设置宽度高度和border-radius属性来实现半圆形状。

.half-circle2{
  position: relative;
  width: 100px;
  height: 50px;
  background-color: #ccc;
}
.half-circle2::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 50px;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  background-color: #ffcc00;
}

效果如下：

4. 用SVG实现半圆形状

除了使用CSS，我们还可以使用SVG来实现半圆形状。

SVG是一种用于描述二维矢量图形的XML标记语言。它可以用来创建形状、路径、文本、图像、动画等等。

要创建一个半圆，我们可以使用SVG的圆弧指令(Arc command)。这个指令可以让我们绘制任意弧度的圆弧，从而实现半圆形状。

.half-circle3{
  width: 100px;
  height: 50px;
}
.half-circle3 svg{
  width: 100%;
  height: 100%;
}
.half-circle3 path{
  fill: #ffcc00;
}

<div class="half-circle3">
  <svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
    <path d="M 0,50 A 50,50 0 0,1 100,50 L 100,0 L 0,0 Z" />
  </svg>
</div>

效果如下：

5. 总结

CSS可以用很多方法实现半圆形状，其中用border-radius和宽度高度实现的方法最简单，伪元素和SVG实现的方法可以实现更多复杂的形状，根据实际需求选择相应的方法即可。