CSS3圆角border-radius属性详解
2016-04-26 19:21
891 查看
CSS即层叠样式表(Cascading StyleSheet),css3是css的最新版本,新增加了很多特性,如:css3动画 animation、Transform、Transition,CSS3渐变,CSS3圆角,文字特效,css3 Flexbox(伸缩盒布局)等等。回顾我们写边框圆角历程,最开始我们用4涨小图片(左上角,右上角,左下角,右下角)来实现边框圆角,后来进化到2涨背景图片(上,下),后来进化到1涨图片(css sprite)实现圆角,最后到现在CSS3
border-radius属性的出现,我们完全可以抛弃背景图片了,达到0图片实现边框圆角,并且不用增加额外的元素节点,也不会因为圆角图片而有额外的HTTP请求。
单个圆角语法:
border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?
列子:
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10pt;
单个圆角语法详情:
说明:border-*-*-radius 属性的两个值决定了作为边框外边形状的四分之一椭圆的半径(请看下图)。第1个取值是水平半径,第2个值是垂直半径。若没有第2个取值,从第1个复製过来。若其中1个长度为零,则角是垂直的,不是圆角。作为水平半径的百分比值,取值相对於边框盒的宽度,作為垂直半径的百分比值,取值相对於边框盒的高度。
如果把一个div方框的水平半径设置为55pt,垂直半径为25pt,则代码如下:
上面讲的是CSS3圆角边框的单个角写法,4个圆角我们需要写4个属性,其实还有简写(缩写)方式,css3圆角简写方式只用写一个属性: border-radius(边框半径)即可达到上面讲的4个圆角效果,
CSS3简写(缩写)语法如下:
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
列子:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
CSS3简写(缩写)语法详情:
<
4000
blockquote style="margin:0px 0px 1em;padding:10px;font-size:14px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'Microsoft YaHei', Arial, Tahoma, SimSun, Heiti, sans-serif;background:rgb(245,245,245);">
说明:border-radius简写可以用来设定四个属性 border-*-radius。若指定的值包含斜线,则斜线前面的取值会设定水平半径,斜线后面的取值会设定垂直半径,若没有斜线,则取值同时用来设定两个半径。每个半径的四个值按照左上、右上、右下、左下的顺序,若没有左下取值则使用右上取值,若没有右下取值则使用左上取值,若没有右上取值则使用左上取值。
上图的“把一个div方框的水平半径设置为55pt,垂直半径为25pt 的列子”4个圆角效果我们可以这样写:
简写方式可以节省很多代码,所以实际开发中推荐用简写方式。
PS:测试圆角建议把div方框加上边线或者背景
border-radius属性的出现,我们完全可以抛弃背景图片了,达到0图片实现边框圆角,并且不用增加额外的元素节点,也不会因为圆角图片而有额外的HTTP请求。
border-radius属性详解
单个圆角语法:border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?
列子:
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10pt;
单个圆角语法详情:
名称: | border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius |
取值: | [ <length> | <%> ]{1,2} |
初始: | 0 |
适用于: | 所有元素 |
继承: | 否 |
百分比: | 相对于边框盒子相应的边.详情看下面说明 |
计算值: | 两个绝对 <length> 或百分比值 |
如果把一个div方框的水平半径设置为55pt,垂直半径为25pt,则代码如下:
border-top-left-radius:55pt 25pt; border-top-right-radius:55pt 25pt; border-bottom-right-radius:55pt 25pt; border-bottom-left-radius:55pt 25pt;
上面讲的是CSS3圆角边框的单个角写法,4个圆角我们需要写4个属性,其实还有简写(缩写)方式,css3圆角简写方式只用写一个属性: border-radius(边框半径)即可达到上面讲的4个圆角效果,
CSS3简写(缩写)语法如下:
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
列子:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
CSS3简写(缩写)语法详情:
<
4000
blockquote style="margin:0px 0px 1em;padding:10px;font-size:14px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'Microsoft YaHei', Arial, Tahoma, SimSun, Heiti, sans-serif;background:rgb(245,245,245);">
名称: | border-radius |
取值: | [ <length> | <%> ]{1,4} [ / [ <length> | <%> ]{1,4} ]? |
初始: | 详细请看下面说明 |
适用于: | 所有元素 |
计算值: | 详细请看下面说明 |
百分比: | 相对于边框盒子相应的边. |
上图的“把一个div方框的水平半径设置为55pt,垂直半径为25pt 的列子”4个圆角效果我们可以这样写:
border-radius:55pt / 25pt;
简写方式可以节省很多代码,所以实际开发中推荐用简写方式。
PS:测试圆角建议把div方框加上边线或者背景
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Web布局连载——两栏固定布局(五)
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- 盒子模型
- CSS选择器
- CSS样式优先权
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究