border-radius是可以实现上下左右半圆的，但是如果在整圆里放下半圆，在圆里的位置不太好控制，按照上下左右一个一个介绍

上半圆

image.png

<style>
  .top{
        border-radius: 50px 50px 0 0;
         width: 100px;
        background: #ddd;
        height: 50px;
        display:block;
    }
</style>
<div class="top"></div>

下半圆

image.png

<style>
  .bottom{
        border-radius:  0 0 50px 50px;
         width: 100px;
        background: #ddd;
        height: 50px;
        display:block;
    }
</style>
<div class="bottom"></div>

看这样很容易就出啦上下半圆了

双色圆

如果想在一个整圆中分别作出上下半圆不同颜色，而且圆中带字的话，如图：

image.png

恐怕上面的办法就不好使了，做这种双色圆的方法如下：

<style>
    li {
        position: relative;
        float: left;
        text-align: center;
        width: 100px;
        height: 100px;
        line-height: 100px;
        border-radius: 50%;
        list-style: none;
        padding: 0;
        margin: 20px;
        background: #ddd;
        color: #fff;
    }
    .top {
        border-radius: 50px 50px 0 0;   
        background: #b6caff!important;
        height: 50%;
    }
    .bottom {
        width: 100%;
        height: 50%;
        border-bottom: 50px solid #eff18b;
        border-radius: 50%;
    }
</style>
    <ul>
        <li>
            <div>
                1
            </div>
        </li>
        <li>
            <div class="top">
                1
            </div>

        </li>
        <li>
            <div class="bottom">
                2
            </div>
        </li>
        <li>
            <div class="top bottom">
                3
            </div>
        </li>
    </ul>

我用四个圆做对比，结果如下：

image.png