css怎么让一个圆隐藏一半

如何使用CSS让一个圆隐藏一半

当我们设计网页时，经常会遇到圆形的图标或按钮，但有时候我们只需要显示它的一半，比如制作半圆形进度条等。本文将介绍如何使用CSS让一个圆隐藏一半的方法。

使用border-radius制作圆形

在介绍如何实现隐藏一半的圆形之前，我们先来了解如何制作一个圆形。CSS3中，我们可以使用border-radius属性制作圆角。当我们设置四个圆角的值相等时，就可以制作出一个圆形。

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;/*设置为50%就可以制作出圆形*/
  background-color: #f00;
}

上面的代码中，我们设置.circle元素的宽高为100px，border-radius属性的值为50%，就可以制作出一个半径为50px的红色圆形。

使用overflow:hidden实现隐藏

了解了如何制作圆形之后，接下来我们就可以讲如何实现隐藏圆形的一半。我们可以将.circle元素的宽度设置为它的半径的两倍，高度保持不变。然后设置overflow:hidden，这样就可以只显示一个半圆了。

.half-circle{
  width: 100px;
  height: 50px;/*高度为半径的一半*/
  border-radius: 50px 50px 0 0;/*只设置上面两个圆角，就可以制作出半圆*/
  background-color: #f00;
  overflow: hidden;
}

通过设置border-radius属性，我们只保留了元素上半部分的圆角，下半部分没有圆角。接下来设置元素的高度为半径的一半，就可以只显示一个半圆了。最后设置overflow:hidden就可以隐藏了。

使用伪元素实现更加简洁

上面的方法虽然可以实现效果，但需要设置元素的宽高及border-radius等属性，代码冗长。使用伪元素可以让代码更加简洁。

我们可以使用:before或:after伪元素来制作半圆形。首先要在.circle元素内添加一个空的伪元素，然后将它变成一个圆形，并将它旋转90度，最后设置overflow:hidden就可以隐藏了。

.half-circle2{
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  background-color: #f00;
  position: relative;/*定位*/
}
.half-circle2:before{
  content: "";
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: #f00;
  position: absolute;/*绝对定位到元素上面，下面的overflow:hidden才有效*/
  top: 0;
  left: 0;
  transform: rotate(-90deg);/*旋转90度*/
}
.half-circle2:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;/*绝对定位到元素上面，下面的overflow:hidden才有效*/
  top: 0;
  left: 0;
  overflow: hidden;/*隐藏*/
}

上面的代码中，我们将.half-circle2元素设置为相对定位，然后添加一个空的:before伪元素，并设置其为绝对定位，绝对定位到元素上方。将它变成一个圆形后，使用transform:rotate(-90deg)将它旋转90度。最后将元素的高度设置为半径的一半，然后在伪元素上添加一个高度为100%的子元素，并设置为绝对定位，将它覆盖在伪元素上，最后设置overflow:hidden就可以隐藏了。

结语

本文介绍了通过设置元素的宽高及border-radius等属性、使用伪元素等方法制作半圆形的效果，并且详细阐述了每种方法的实现原理和注意事项。希望本文能对大家了解如何使用CSS让一个圆隐藏一半有所帮助。