css3实现画半圆弧线的示例代码
发布时间：2017-11-06 15:32:32 作者：SingleShadow 
我要评论
我要评论本篇文章主要介绍了css3实现画半圆弧线的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
本文介绍了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>
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实2023-04-27
这篇文章主要介绍了CSS transform属性一些基础知识与介绍,需要的朋友可以参考下2023-04-2836种漂亮的CSS3网页按钮Button样式(主要结合before与after)
这篇文章主要介绍了36种漂亮的CSS3网页按钮Button样式，主要结合before与after,需要的朋友可以参考下2023-03-25
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们做一个通过 css3 鼠标滑过实现动画线条边框，下面一起看看吧2023-02-22
春节快到了，因为疫情已经好久没有回老家了，今年终于可以回家过年了，我已经抑制不住自己激动的心情了。因此，我利用css3的旋转做了一个福到了的特效，而且是双旋转，感兴2023-01-29
这篇文章主要介绍了CSS3实现一根心爱的二踢脚示例代码,这里主要是布局一个DIV元素，根据现实的二踢脚设置其宽高，并且利用css3的box-shadow属性添加阴影效果，需要的朋友可2023-01-05
本文主要介绍了css3手动实现pc端横向滚动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-20
本文通过实例代码介绍了CSS3实现指纹特效，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-03-16
这篇文章主要为大家介绍了css3新增选择器的应用示例以及内容解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-10
这篇文章主要为大家介绍了css3新特性的应用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-03-14
最新评论