欢迎光临十大正规赌博平台!

十大正规赌博平台个人网站-十大正规赌博平台个人博客-杨照佳

正规博彩十大公司

关注世界十大博彩公司的博客网站

首页 > WEB开发 > css3案例分享 >

Css3实现画半圆弧线的示例代码

发布时间:2017-11-13  编辑:正规博彩十大公司   点击:   

本文介绍了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实现画半圆弧线的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持十大正规赌博平台个人博客

本文地址:/web/css3/18306.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1