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气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php三元运算符知识汇总
2015/07/02 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
php实现简单四则运算器
2020/11/29 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
js实现幻灯片轮播图
2020/08/14 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Python内置函数locals和globals对比
2020/04/28 Python
经理管理专业毕业自荐书范文
2014/02/12 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
公司应聘自荐书
2014/06/14 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript
优化Mysql查询的示例
2022/04/26 MySQL