这篇文章主要讲解了“在CSS3中画半圆弧线怎么做，代码是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“在CSS3中画半圆弧线怎么做，代码是什么”吧！

本文介绍了css3实现画半圆弧线的示例代码，分享给大家，具体如下：

css代码

.circle1 {
    width: 100px;
    height: 200px;
    border: 1px solid black;
    border-radius: 100% 0 0 100%/50%;
    border-right: none;
}
.circle2 {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
}
.circle3 {
    width: 100px;
    height: 200px;
    border: 1px solid black;
    border-radius: 0 100% 100% 0/50%;
    border-left: none;
}
.circle4 {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    border-radius: 0 0 50% 50%/0 0 100% 100% ;
    border-top: none;
}

html代码

<ul>
    <li><div class="circle1"></div></li>
    <li><div class="circle2"></div></li>
    <li><div class="circle3"></div></li>
    <li><div class="circle4"></div></li>
</ul>

效果如下：

到此这篇关于“在CSS3中画半圆弧线怎么做，代码是什么”的文章就介绍到这了,更多相关在CSS3中画半圆弧线怎么做，代码是什么内容，欢迎关注博信技术资讯频道，小编将为大家输出更多高质量的实用文章！