css中半圆怎么画出来

CSS中的半圆是一种非常常见的设计元素，常被用于各种图标和背景的制作。要画出一个半圆，我们需要使用CSS中的border-radius属性。

圆角：

border-radius:50%; 

通过设置圆角半径为50%就可以画出一个完整的半圆。但是，我们通常需要更多的控制，比如说半圆的方向和大小。

上半圆：

border-top-left-radius:50%;

border-top-right-radius:50%;

下半圆：

border-bottom-left-radius:50%;

border-bottom-right-radius:50%; 

如果要画出只有一半的半圆，我们可以使用以上代码来控制相应的边角的圆角半径。

左半圆：

border-top-left-radius:50%;

border-bottom-left-radius:50%;

右半圆：

border-top-right-radius:50%;

border-bottom-right-radius:50%; 

以上代码分别控制了左边的半圆和右边的半圆。通过调整每个边角的半径，我们可以画出想要的形状。

除了使用border-radius属性外，我们还可以使用pseudoelement来绘制半圆。

半圆：

content:"";

border-radius:50%;

background-color: #000;

width:20px;

height:20px;

display: inline-block; 

通过使用pseudoelement，我们可以在不添加多余HTML标签的情况下，直接向元素添加样式。在这段代码中，我们使用了content属性创建了一个空内容的伪元素，然后使用border-radius属性来绘制出一个半圆形状，最后设置宽和高并设置为inline-block，实现绘制出半圆。

综上所述，在CSS中，我们可以通过border-radius属性和pseudoelement来灵活地绘制半圆形状，让我们的设计更加多样化。