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 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 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调用dll的实例操作动画与代码分享
2012/08/14 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
python实现电子词典
2020/04/23 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python通过format函数格式化显示值
2020/10/17 Python
大四毕业生学习总结的自我评价
2013/10/31 职场文书
授权委托书怎么写
2014/04/03 职场文书
开展读书活动总结
2014/06/30 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
员工工作及收入证明
2014/10/28 职场文书
统计工作个人总结
2015/03/03 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis