css3 border-radius属性详解


Posted in HTML / CSS onJuly 05, 2017

有什么用?

这个radius属性,可不只是设置圆角,还可以用来画一些简单的图形。

画个圆形

#demo1 {
        width:100px;
        height:100px;
        background:red;
        border-radius: 50%;    
    }

上述50%就是说设置各边圆角都为50%。

那么如何画个半圆?

如下,把宽度设置为高度的两倍。

#demo2 {
        width:100px;
        height:50px;
        background:green;
        border-radius: 50px  50px 0 0;
             }

结果。如图,矩形为100*50 。然后左上角和右上角的圆角分别是50px。因此就是半圆了。

css3 border-radius属性详解

左侧半圆

#demo3 {
        width:50px;
        height:100px;
        background: pink;
        border-radius: 50px 0 0 50px;
    }

css3 border-radius属性详解
 

画半圆了,关键是把握住宽度和高度的比例关系,先画个矩形,然后设置各个方向的圆角就可以了。注意顺序是从左上角开始的顺时针方向。

1/4圆呢?

#demo4 {
        width:100px;
        height:100px;
        background:gray ;
        border-radius: 100px 0 0 0;

    }

先画一个正方形,然后设置任意一个圆角为100%就可以。设置哪个角度是100%哪个角度就是弧线。

css3 border-radius属性详解

PS

css里并没有直接画圆的,而是通过圆角实现的,当然你也可以通过canvas来实现。

参考

2.半圆图解CSS3:核心技术与案例实战 

HTML / CSS 相关文章推荐
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 #HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 #HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 #HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 #HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 #HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 #HTML / CSS
css3个性化字体_动力节点Java学院整理
Jul 12 #HTML / CSS
You might like
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
Python中index()和seek()的用法(详解)
2017/04/27 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
大专生自荐信
2013/10/04 职场文书
实习教师自我鉴定
2013/12/09 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
自行车广告词大全
2014/03/21 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
2014年变电站工作总结
2014/12/19 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript