实例讲解CSS3中的border-radius属性


Posted in HTML / CSS onAugust 18, 2015

Border-radius

border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。

CSS Code复制内容到剪贴板
  1. border-radius: 2em 1em 4em / 0.5em 3em;  

等价于:

CSS Code复制内容到剪贴板
  1. border-top-left-radius: 2em 0.5em;   
  2. border-top-rightright-radius: 1em 3em;   
  3. border-bottom-rightright-radius: 4em 0.5em;   
  4. border-bottom-left-radius: 1em 3em;  

如何使用border-radius属性

下面是border-radius属性最基本的使用方法。

CSS Code复制内容到剪贴板
  1. .round {   
  2.  border-radius: 5px/* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */  
  3.  -moz-border-radius: 5px/* Mozilla浏览器的私有属性 */  
  4.  -webkit-border-radius: 5px/* Webkit浏览器的私有属性 */  
  5.   
  6.  border-radius: 5px 4px 3px 2px/* 四个半径值分别是左上角、右上角、右下角和左下角 */  
  7. }  

1.用border-radius画圆
实心圆
实例讲解CSS3中的border-radius属性

如图,是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等,并且把border的宽度设为高度和宽度的一半。代码如下。

CSS Code复制内容到剪贴板
  1. #circle {   
  2.  width200px;   
  3.  height200px;   
  4.  background-color#a72525;   
  5.  -webkit-border-radius: 100px;   
  6. }  

空心圆
实例讲解CSS3中的border-radius属性

通过border-radius属性画空心圆和画实心圆的方法差不多,只是border的宽度只能小于高度和宽度的一半。代码如下。

CSS Code复制内容到剪贴板
  1. #circle {   
  2.  width200px;   
  3.  height200px;   
  4.  background-color#efefef/* Can be set to transparent */  
  5.        border3px #a72525 solid;   
  6.  -webkit-border-radius: 100px;   
  7. }  

虚线圆
实例讲解CSS3中的border-radius属性

CSS Code复制内容到剪贴板
  1. #circle {   
  2.  width200px;   
  3.  height200px;   
  4.  background-color#efefef/* Can be set to transparent */  
  5.        border3px #a72525 dashed;   
  6.  -webkit-border-radius: 100px 100px 100px 100px;   
  7. }  

2.半圆和四分之一圆
半圆

实例讲解CSS3中的border-radius属性以本例来讲,半圆的画法是把宽度设为高度的一半,并且也只设置左上角和左下角的半径。代码如下。

CSS Code复制内容到剪贴板
  1. #quartercircle {   
  2.  width200px;   
  3.  height200px;   
  4.  background-color#a72525;   
  5.  -webkit-border-radius: 200px 0 0 0;   
  6. }  

四分之一圆
实例讲解CSS3中的border-radius属性

四分之一圆的实现方法是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度。本例代码如下。

CSS Code复制内容到剪贴板
  1. #quartercircle {   
  2.  width200px;   
  3.  height200px;   
  4.  background-color#a72525;   
  5.  -webkit-border-radius: 200px 0 0 0;   
  6. }  

更多玩法

看了这么多实例后,你完全可以自己创造更多玩法,如:
实例讲解CSS3中的border-radius属性

虚线的半圆和四分之一圆。
实例讲解CSS3中的border-radius属性

配合position属性做一个月亮。
实例讲解CSS3中的border-radius属性

配合position、RGBa和z-index这些属性做一个本文开头的色彩维恩图。

HTML / CSS 相关文章推荐
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 #HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 #HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 #HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 #HTML / CSS
详解CSS3中@media的实际使用
Aug 04 #HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 #HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 #HTML / CSS
You might like
德劲1103的维修打理经验
2021/03/02 无线电
桌面中心(一)创建数据库
2006/10/09 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
基于php实现的验证码小程序
2016/12/13 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python统计单词出现的次数
2018/04/04 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
python字符串格式化方式解析
2019/10/19 Python
简单了解python元组tuple相关原理
2019/12/02 Python
opencv+python实现均值滤波
2020/02/19 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
一年级学生评语大全
2014/04/21 职场文书
军事博物馆观后感
2015/06/05 职场文书
四年级数学教学反思
2016/02/16 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL