45fan.com - 路饭网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:如何使用css3实现画半圆弧线?

如何使用css3实现画半圆弧线?

2017-12-23 11:19:08 来源:www.45fan.com 【

如何使用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实现画半圆弧线?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。


本文地址:http://www.45fan.com/a/question/95138.html
Tags: css3 实现 半圆
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部