border-radius 实例详解.doc

outline 在一个声明中设置所有的轮廓属性。 outline-color 设置轮廓的颜色。 outline-style 设置轮廓的样式。 outline-width 设置轮廓的宽度。 border-radius 定义和描述 ? border-radius简写属性为元素添加圆角边框，设置所有四个border-*-radius属性。 length（定义圆角的形状%（以百分比定义圆角的形状默认值0 继承性 no 版本 CSS3 JavaScript语法 object.style.borderadius=5px 注意 border-top-left-radius属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。 浏览器支持性 IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。 border-top-left-radius 属性 border-top-left-radius 属性定义左上角边框的形状。 语法：border-bottom-right-radius: length|% [length|%]; 值描述 length 定义左下角的形状。 % 以百分比值定义左下角的形状。 值描述 length 定义右上角的形状。 % 以百分比值定义右上角的形状。 一、语法：复制代码 代码如下: border-radius ： none | length{1,4} [/ length{1,4} ]?? 二、取值： length： 由浮点数字和单位标识符组成的长度值。不可为负值。 三、说明： border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现： 1、border-radius: [ length{1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等 2、border-radius:[ length{1,4} ] ?[ length{1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值 3、border-radius:[ length{1,4} ] ? [ length{1,4} ] ? [ length{1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right 4、border-radius:[ length{1,4} ] ? [ length{1,4} ] ?[ length{1,4} ] ? [ length{1,4} ];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left 前面，我们主要看了border-radius的缩写格式，其实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 //左下角 这里说一下，各角拆分出来取值方式：length?length中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。 border-radius只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10