CSS3 border-radius边框圆角

CSS3 border-radius边框圆角http://www.cnblogs.com/polk6/p/6050818.html

在CSS3中提供了对边框进行圆角设定的支持，可对边框1~4个角进行圆角样式设置。

目录

1. 介绍

2. value值的格式和类型

3. border-radius 1~4个参数说明

4. 在线示例

1. 介绍

1.1 圆角属性

CSS3提供了5种圆角属性：

border-radius ：同时设置4个边框的圆角样式。

border-top-left-radius ：设置左上角边框的圆角样式。

border-top-right-radius ：设置右上角边框的圆角样式。

border-bottom-left-radius ：设置左下角边框的圆角样式。

border-bottom-right-radius ：设置右下角边框的圆角样式。

示例：

1.2 浏览器支持情况

最小版本支持：IE 9 、Chrome 4

1.3 引用资料

规范：https://www.w3.org/TR/css3-background/#the-border-radius

文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

2. value值的格式和类型

border-*-radius属性的值可分别设定水平半径和垂直半径；若省略垂直半径，则垂直半径默认采用水平半径的值。

而每个值，支持的单位有固定长度和百分比。若设置百分比格式，则水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。

组合如下(以border-radius为例)：

1) border-radius:20px; // 表示圆角的水平半径和垂直半径都为20px长度。

2) border-radius:20px/40px; // 表示圆角的水平半径的长度为20px，垂直半径的长度为20px。

3) border-radius:20%; // 表示圆角的水平半径和垂直半径都为各自边框长度的20%。

4) border-radius:20%/30%; // 表示圆角的水平半径为边框宽度的20%，垂直半径都为边框高度的20%。

5) border-radius:20px/30%; // 表示圆角的水平半径长度20px，垂直半径都为边框高度的20%。

示例：

3. border-radius 1~4个参数说明

border-radius可以一次性对四个角设置相同的值，也可以对4个角分别设置圆角样式。

而秘诀就在于设定border-radius的参数个数。

首先看下CSS规范对border-radius的参数说明：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

可得知border-radius的参数个数范围为1~4个，这里要注意点水平半径和垂直半径的分别使用时：在border-radius中先设置4个边角的水平半径再设置4个边角的垂直半径。

下面分别说明参数1~4个参数所代表的含义：

3.1 参数个数：1

说明：4个边框的圆角样式都采用这个设置。

示例：border-radius: 20px; // 4个边框圆角样式都为20px

3.2 参数个数：2

说明：

　　第①参数：左上角和右下角边框的圆角样式。

　　第②参数：右上角和左下角边框的圆角样式。

示例：border-radius: 20px 40px; // 左上角和右下角：20px；右上角和左下角：40px

3.3 参数个数：3

说明：

　　第①参数：左上角边框的圆角样式。

　　第②参数：右上角和左下角边框的圆角样式。

　　第③参数：右下角边框的圆角样式。

示例：border-radius:20px 40px 60px; // 左上角：20px；右上角和左下角：40px；右下角：60px

3.4 参数个数：4

说明：

　　第①参数：左上角边框的圆角样式。

　　第②参数：右上角边框的圆角样式。

　　第③参数：右下角边框的圆角样式。

　　第④参数：左下角边框的圆角样式。

示例：border-radius:20px 40px 60px 80px; // 左上角：20px；右上角：40px；右下角：60px；左下角：80px

4.在线示例

4.1 示例

4.2 在线地址

地址：http://www.akmsg.com/WebDemo/CSS3-border-radius.html

==================================系列文章==========================================

本篇文章：8.1 CSS3 border-radius边框圆角

Web开发之路系列文章

Web开发之路系列文章

1.HTML

　　1.1 HTML页面源代码布局介绍

　　1.2 HTML基础控件介绍

　　1.3 iframe 和 frameset 的区别

　　1.4 name、id、class 的区别

　　1.5 table、form表单标签的介绍以及get和post提交方式

　　1.6 HTML kbd键盘元素

2.CSS 层叠样式表

　　2.1 CSS 选择器及各样式引用方式

　　2.2 CSS HTML元素布局及Display属性

　　2.3 CSS Float 浮动属性

　　2.4 CSS Position 定位属性

3.JavaScript介绍

　　3.1 JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

　　3.2 JavaScript function函数种类

　　3.3 JavaScript Array对象

　　3.4 JavaScript Date对象

　　3.5 JavaScript Math和Number对象

　　3.6 JavaScript String对象

　　3.7 JavaScript Object对象

　　3.8 JavaScript 自定义对象

　　3.9 JavaScript 对象属性介绍

　　3.10 JavaScript 开发规范

4.BOM

　　4.1 HTML BOM Browser对象

　　4.2 HTML 获取屏幕、浏览器、页面的高度宽度

　　4.3 HTML URL地址解析

5.DOM

　　5.1 HTML DOM 介绍

　　5.2 HTML DOM 对象

　　5.3 HTML 事件(一) 事件的介绍

　　5.4 HTML 事件(二) 事件的注册与注销

　　5.5 HTML 事件(三) 事件流与事件委托

　　5.6 HTML 事件(四) 模拟事件操作

6.HTML5

　　6.1 HTML5 介绍

　 6.2 HTML5 语义元素(一)页面结构

　 6.3 HTML5 语义元素(二)文本内容

　　6.4 HTML5 input元素新的特性

　　6.5 HTML5 progress和meter控件

　　6.6 HTML5 sessionStorage会话存储

　　6.7 HTML5 localStorage本地存储

7.ExtJS 4.2

　　7.1 ExtJS 4.2 介绍

　　7.2 ExtJS 4.2 第一个程序

　　7.3 ExtJS 4.2 组件介绍

　　7.4 ExtJS 4.2 组件的查找方式

　　7.5 ExtJS 4.2 业务开发(一)主页搭建

　　7.6 ExtJS 4.2 业务开发(二)数据展示和查询

　　7.7 ExtJS 4.2 业务开发(三)数据添加和修改

　　7.8 ExtJS 4.2 Grid组件的单元格合并

　　7.9 ExtJS 4.2 Date组件扩展：添加清除按钮

　　7.10 ExtJS 4.2 评分组件

8.CSS 3

　　8.1 CSS3 border-radius边框圆角

只是记录了自己在学习、使用Web前端内容时的心得和碰到的问题。

参考文献：

1）http://www.w3school.com.cn/

2）《JavaScript权威指南(第六版)》

转自http://www.cnblogs.com/polk6/archive/2016/11/14/6050818.html