[分享]css两边有弧度的半圆

CSS制作两边有弧度的半圆

.border-rounded {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: #7c8aff;
  height: 100px;
  width: 200px;
} 

以上代码是制作一个宽200px高100px，两边有弧度的半圆的CSS样式。

其中，border-top-left-radius和border-top-right-radius分别表示左上角和右上角的圆角半径，因为只需要让上方有圆角所以只设置这两个属性。

其中，50%的意思是取区域宽度或高度的一半作为半径，最终就能得到一个与边长相等的圆形。背景颜色可以根据需求更改。

通过这种方式制作半圆，可以在轮廓、导航栏、进度条等等各种场景下使用，既美观又实用。