使用border-radius 制作圆形有两点技巧：

（1）元素的宽高形同

（2）border-radius值为宽或高的一半，或者直接设置为50%；

制作半圆大同小异，只是圆角方位配合的问题。

下面仅给出示例：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="D:\myweb\css\3-19-1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="div">圆</div>
<div class="semicircle top">上半圆</div>
<div class="semicircle right">右半圆</div>
<div class="semicircle bottom">下半圆</div>
<div class="semicircle left">左半圆</div>
</body>
</html>

css代码：

.div{
width: 200px;
height: 200px;
border:2px  orange solid;
border-radius: 50%;
}
.semicircle{
background-color: orange;
margin: 30px;
}
.top{
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
.right{
width: 50px;
height: 100px;
border-radius: 0 50px 50px 0;
}
.bottom{
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;
}
.left{
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
}

效果如下：

制作扇形遵循三同一不同的原则，三同就是宽高半径相同，一不同就是圆角位置不同。

.div{
width: 200px;
height: 200px;
border:2px  orange solid;
border-radius: 50%;
}
.semicircle{
background-color: orange;
margin: 30px;
}
.top{
width: 100px;
height: 100px;
border-radius: 100px 0 0 0;
}
.right{
width: 100px;
height: 100px;
border-radius: 0 100px 0 0;
}
.bottom{
width: 100px;
height: 100px;
border-radius: 0 0 100px 0;
}
.left{
width: 100px;
height: 100px;
border-radius: 0 0 0 100px;
}

椭圆：

.semicircle{
background-color: orange;
margin: 30px;
}
.top{
width: 100px;
height: 50px;
border-radius: 100px/50px;
}
.right{
width: 50px;
height: 100px;
border-radius: 50px/100px;
}

border-radius制作圆形，半圆形，扇形，椭圆相关推荐

  1. Android绘图机制（二）——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解

    Android绘图机制(二)--自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解 我们要想画好一些炫酷的View,首先我们得知道怎么去画一些基础的图案,比如矩形,圆 ...

  2. 易企秀如何生成图片_易企秀如何制作圆形照片

    [www.520z-2.com - 话题作文] 篇一:<PS制作圆形全景图教程> 这篇教程像飞特网的朋友们介绍用PS制作圆形全景图的方法,其中还介绍到了PS最新的自动拼接全景图功能,希望飞 ...

  3. Android开发之制作圆形头像自定义View,直接引用工具类，加快开发速度。带有源代码学习

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 博客园主页:http://www.cnblogs.com/mcxiaobing ...

  4. Android开发之制作圆形头像自定义View,直接引用工具类，加快开发速度。带有源代码学习...

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 博客园主页:http://www.cnblogs.com/mcxiaobing ...

  5. iOS开发 －－制作圆形的头像（UIImage）

    有时候我们的应用需要登录,登录后的用户信息中有用户头像,以前使用的方形图片比较丑陋,现在基本所有的应用都是使用圆形都头像了,但是用户上传上来都图片不一定是圆形的(基本上都不是),这个时候就需要我们程序 ...

  6. 如何使用CSS3 Border Radius属性

    With CSS3, you can give any element "rounded corners" by using the border-radius property. ...

  7. 【PS基础教程】PS制作圆形小图标

    [PS基础教程]PS制作圆形小图标 *[ps基础教程]是我自己在完全没有ps基础的情况下(好多教程里相关选项的位置我都找不到)遇到的问题的总结. 制作效果图如下图所示: 第一步,使用ps的截切工具将图 ...

  8. php设置用户头像,php制作圆形用户头像的实例_自定义封装类源代码

    思路 使用图层的方法设计,共需要创建3个图像层 1.底层:最后生成的图像 2.真实用户头像:作为中间层,用户上传的真实头像图片 3.圆形蒙版:作为最上层,在蒙版中绘制圆形,并设置为透明 如图: 代码如 ...

  9. 制作圆形图片，你会以下几种？

    我的简书同步发布:制作圆形图片,你会以下几种? 转载请注明出处:[huachao1001的专栏:http://blog.csdn.net/huachao1001] 说起圆角图片,相信每个人心中都有自己 ...

最新文章

  1. 专访趋势科技CEO陈怡桦：病毒行业需要反省
  2. Mysql共享锁实例_mysql共享锁与排他锁用法实例分析
  3. 27. 代码实例-spring声明式事务
  4. 20162329 2017-2018-1 《程序设计与数据结构》第九周学习总结
  5. Dubbo的静态服务
  6. [网络安全自学篇] 六十四.Windows安全缺陷利用之SMBv3服务远程代码执行（CVE-2020-0796）复现及防御机理
  7. 周围剃光头顶留长发型_发型改变气质，这话放在石原里美身上也通用啊
  8. easyplayerpro 使用说明_H265网页播放器EasyPlayerPro-Win如何通过配置文件实现自动播放等功能？...
  9. 使用DataWorks调度DLA循环任务
  10. 全民编程时代，程序员该如何保住饭碗？
  11. Regularized linear regression(正则化线性回归)----吴恩达机器学习
  12. C盘\用户目录下\管理员文件夹 如何重命名？
  13. 梦幻西游五虎将访谈系列：主策划小白
  14. Python注释（多行注释和单行注释）用法详解
  15. 禅宗公案 艾舍尔的画与哥德尔定理——哥德尔逻辑与哲学之2
  16. 2017.08.18【NOIP提高组】模拟赛B组 沙耶的玩偶(doll)
  17. 【Kaggle-House Price Prediction】代码参考
  18. python会计系统_在Python中进行会计的最佳实践
  19. 多肽TAT接枝/功能肽RGDC修饰荧光碳量子点/碳量子点修饰多肽LyP-1的制备研究
  20. 登录界面——渗你千千万万遍

热门文章

  1. zblog php搬家出错,ZBlog备份、恢复与搬家（换空间）方法
  2. php 7.2 双问号,PHP7的双问号“??”语法以及和“?:”的区别
  3. 智慧体育馆 3D 可视化，掀起城市建设新热潮
  4. 鱼塘经济学理论又有新发展！
  5. 魔兽改建程序源码（一）
  6. 计算机设备型号怎么查光驱,怎么查看电脑光驱类型?
  7. 分离出句子中的单词（双指针）(1)
  8. 原来Slack是这样成为史上增长最快的SaaS产品的
  9. 程杰：关于阅读技术类图书的思考
  10. ctfhub技能书+历年真题学习笔记（详解）