css3画半圆弧线的实例代码
来源：爱站网时间：2022-11-15编辑：网友分享
想不想在CSS中实现半圆弧线的效果？下列这篇爱上技术频道小编收集的文章详细解说了具体操作代码，有需要的朋友记得来参考下，看完后会让你有不一样的收获。
本文介绍了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画半圆弧线的实例代码内容都已分享完毕，相信有些刚接触的朋友不是特别了解，这种情况可以来网站咨询小编，小编会帮助你们解决问题所在。有需要请关注js.aizhan.com。
上一篇：css矩形边角加粗的实例代码
