实例讲解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 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php类中private属性继承问题分析
2012/11/01 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP引用的调用方法分析
2016/04/25 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
JS event使用方法详解
2008/04/28 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
JavaScript数组的5种迭代方法
2017/09/29 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
python正则表达式re模块详解
2014/06/25 Python
Python3遍历目录树实现方法
2015/05/22 Python
python支付宝支付示例详解
2019/08/22 Python
pandas参数设置的实用小技巧
2020/08/23 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
编程实现去掉XML的重复结点
2014/05/28 面试题
小学生春游活动方案
2014/08/20 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2014年财政所工作总结
2014/11/22 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android