[分享]css3怎样弄一个空的半圆

CSS3可以实现很多漂亮的效果，比如一个空的半圆，下面让我们来看看怎样实现。 首先，我们需要用到一个class来指定需要实现空半圆的元素。我们可以命名它为circle。 .circle{ width:...

CSS3可以实现很多漂亮的效果，比如一个空的半圆，下面让我们来看看怎样实现。

首先，我们需要用到一个class来指定需要实现空半圆的元素。我们可以命名它为circle。

.circle{
   width: 100px;
   height: 50px;
   border-radius:50px/25px;
   border-top:none;
   border-right:none;
   border-left:none;
   background-color: transparent;
} 

在上面的代码中，我们使用了border-radius属性来控制元素的大小和半径，其中50px/25px的含义是水平半径和垂直半径，分别是50px和25px，这样就可以实现半圆形了。border-top:none; border-right:none; border-left:none;这几行代码是为了将三个边框去掉，只留下底部的边框。

最后一个关键点就是设置了元素的background-color为transparent，这样半圆形就是空心的！

你可以将这些代码复制到你的CSS文件中，然后给需要的元素添加.circle这个class来实现空半圆形的效果。