重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

使用css3怎么绘制一个半圆弧线-创新互联

使用css3怎么绘制一个半圆弧线?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联是一家专业提供博州企业网站建设,专注与成都网站建设、做网站成都h5网站建设、小程序制作等业务。10年已为博州众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

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代码

        
    
  •     
  •     
  • 效果如下:

    使用css3怎么绘制一个半圆弧线

    关于使用css3怎么绘制一个半圆弧线问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


    分享名称:使用css3怎么绘制一个半圆弧线-创新互联
    网站链接:http://cqcxhl.cn/article/doghcp.html

    其他资讯

    关于我们
    公司简介 发展历程
    服务项目
    高端网站建设 小程序开发 APP开发 网络营销
    建站知识
    网站建设 网站设计 网站制作 小程序
    联系我们
    公司地址 人才招聘
    成都 重庆
    电话:028-86922220
    地址:成都市太升南路288号锦天国际A幢1002号
    电话:028-86922220
    地址:重庆市南岸区弹子石腾龙大道58号2栋21-6
    在线咨询
    服务热线
    服务热线:028-86922220
    TOP