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感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 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读取MySQL数据代码
2008/06/05 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
用python 制作图片转pdf工具
2015/01/30 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python查看模块安装位置的方法
2018/10/16 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Python request操作步骤及代码实例
2020/04/13 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
大专毕业生简历的自我评价
2013/10/20 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
三八节主持词
2014/03/17 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书