首页 / CSS3 / css3做出半圆弧线
css3做出半圆弧线
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css3做出半圆弧线,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1025字,纯文字阅读大概需要2分钟。
内容图文
![css3做出半圆弧线](/upload/InfoBanner/zyjiaocheng/413/5717543a896146b4957b4120f91a59cd.jpg)
本文介绍了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的滤镜实现火焰效果
以上就是css3做出半圆弧线的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的css3做出半圆弧线全部内容,希望文章能够帮你解决css3做出半圆弧线所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。