看这样很容易就出啦上下半圆了
如果想在一个整圆中分别作出上下半圆不同颜色，而且圆中带字的话，如图：
恐怕上面的办法就不好使了，做这种双色圆的方法如下：
我用四个圆做对比，结果如下：
1、在电脑上打开Css，然后准备一个空的html结构，在其中放置一个空的div。2、这时需要去除浏览器中一些特有的样式。
3、给这个样式一个宽高，并添加一个背景。
4、最后给样式添加border-radius属性，其值为宽或高的一半。
5、最后运行程序，这样就会在界面中看到一个圆形。
div{
display: inline-block
border:1px solid #6baabb
width:40px
height:40px
float:left
margin:0px 10px
}
a{
display: inline-block
width:40px
height:40px
background: #6baabb
}
.Round{/*圆*/
border-radius:20px
}
.LeftRound{/*左半圆*/
width:20px
border-radius:20px 0px 0px 20px
}
.RightRound{/*右半圆*/
width:20px
border-radius:0px 20px 20px 0px
}
.TopRound{/*上半圆*/
height:20px
border-radius:20px 20px 0px 0px
}
.BottomRound{/*下半圆*/
height:20px
border-radius:0px 0px 20px 20px
}
<div><a class="Round"></a></div> 全圆
<div><a class="LeftRound"></a></div> 左半圆
<div><a class="RightRound"></a></div> 右半圆
<div><a class="TopRound"></a></div> 上半圆
<div><a class="BottomRound"></a></div> 下半圆
