css包括几种类型

CSS半圆制作方法：

/* 1.使用伪元素:before或:after来制作半圆形 */
.half-circle {
  position: relative;
  width: 200px;
  height: 100px;
  border: 1px solid #000;
}
.half-circle:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 50%;
  border-radius: 100px 100px 0 0;
  border: 1px solid #000;
}

/* 2.使用border-radius和overflow属性制作半圆形 */
.half-circle2 {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 100px 100px 0 0;
  overflow: hidden;
}
.half-circle2:before {
  content: "";
  display: block;
  height: 200px;
  margin-top: -100px;
  border-radius: 100px;
  border: 1px solid #000;
  Box-shadow: inset 0 0 0 10px #fff;
}

以上两种方法都可以制作出半圆形，第一种方法需要使用伪元素来实现，需要将伪元素的宽度设置为100%、高度设置为50%、border-radius设置为100px 100px 0 0来制作。第二种方法则直接使用border-radius和overflow属性来制作，只需要将border-radius设置为100px 100px 0 0，overflow设置为hidden即可，同时使用:before伪元素来制作半圆形，并设置其高度为200px、margin-top为-100px来使其水平居中，同时设置Box-shadow样式来加深其边框颜色，使得视觉效果更佳。