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


Posted in HTML / CSS onNovember 06, 2017

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

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

HTML / CSS 相关文章推荐
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 #HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 #HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 #HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 #HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 #HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 #HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 #HTML / CSS
You might like
PHP实现分页的一个示例
2006/10/09 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
大学考试作弊检讨书
2014/01/30 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
世界名著读书笔记
2015/06/25 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript