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><p class="circle1"></p></li>
 <li><p class="circle2"></p></li>
 <li><p class="circle3"></p></li>
 <li><p class="circle4"></p></li>
</ul>

效果如下：

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

CSS3的鼠标移入图片动态提示效果

css中sticker-footer布局如何使用

CSS的滤镜实现火焰效果