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实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 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
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
提高PHP编程效率的方法
2013/11/07 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
php实例化一个类的具体方法
2019/09/19 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python命令 -u参数用法解析
2019/10/24 Python
python 实现多维数组转向量
2019/11/30 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
销售副总经理岗位职责
2013/12/11 职场文书
计生专干事迹
2014/05/28 职场文书
高中班级口号
2014/06/09 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
佛光寺导游词
2015/02/10 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers