一、基本语法:
border-radius : none | <length>{1,4} [/ <length>{1,4} ]?
二、取值范围:
<length>: 由浮点数字和单位标识符组成的长度值。不可为负值。
三、简单说明:
1、border-radius 是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:
(1)、只有一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等。
(2)、有两个值,那么 top-left 等于 bottom-right,并且取第一个值;top-right 等于 bottom-left,并且取第二个值
(3)、有三个值,其中第一个值是设置top-left而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
(4)、有四个值,其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。
2、其实 border-radius 和 border 属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴在X轴:
border-top-left-radius: <length><length>//左上角
border-top-right-radius: <length><length>//右上角
border-bottom-right-radius:<length><length>//右下角
border-bottom-left-radius:<length><length>//左下角
3、这里说一下,各角拆分出来取值方式:<length><length>中第一个值是圆角水平半径,第二个值是垂直半径,如果第二个值省略,那么其等于第一个值,这时这个角就是一个四分之一的圆角,如果任意一个值为0,那么这个角就不是圆角。
四、border-radius各浏览器的支持
border-radius 只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式,对于老版的浏览器,border-radius 需要根据不同的浏览器内核添加不同的前缀,比说 Mozilla 内核需要加上“-moz”,而 Webkit 内核需要加上“-webkit”等,那么我为了能兼容各大内核的老版浏览器
1、Mozilla(Firefox, Flock等浏览器)
-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角
2、WebKit (Safari, Chrome等浏览器)
-webkit-border-top-left-radius: //左上角
-webkit-border-top-right-radius: //右上角
-webkit-border-bottom-right-radius: //右下角
-webkit-border-bottom-left-radius: // 左下角
3、Opera浏览器:
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
4、Trident (IE)
IE9 以下版本不支持 border-radius,而且 IE9 没有私有格式,都是用 border-radius,其写法和 Opera 是一样的。
IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE9支持CSS3和HTML5的标准。让IE支持CSS3的解析方法有很多种,(让IE浏览器支持HTML5标准的方法)下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角:
1、下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar;.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。
四个角你设置的高度是8px
ie在你高度低于行高(line-height)的情况下,怕你会看不到文字,会强制将高度设置成行高的高度
解决方法就是将行高和字号设置到比你设置的高度还低,overflow:hidden纯属个人喜好
例:
#prighttop{
width:8px
height:8px
line-height:0
font-size:0
overflow:hidden
position:absolute
right:-1px
top:-1px
background:url(bg.gif) no-repeat -2px -32px
}
border-radius属于css3而IE8并不支持border-radius属性。所以IE8会显示正方形。
想要让ie8支持就需要切图,把圆角边框当做背景切入到容器内。