border-radius 实例详解.

1、outline在一个声明中设置所有的轮廓属性。outline-color设置轮廓的颜色。outline-style设置轮廓的样式。outline-width设置轮廓的宽度。border-radius定义和描述 border-radius简写属性为元素添加圆角边框，设置所有四个border-*-radius属性。 语法：border-radius: 1-4 length|% / 1-4 length|%; 按此顺序设置每个radii的四个值：如果省略bottom-left，则与top-right相同，如果省略bottom-right，则与top-left相同，如果省略top-right，则与to

2、p-left相同。可能的取值length（定义圆角的形状）/ %（以百分比定义圆角的形状）默认值0继承性no版本CSS3JavaScript语法object.style.border-radius=5px注意border-top-left-radius属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。浏览器支持性IE9+、Firefox 4+、Chrome、Safari

3、 5+ 以及 Opera 支持 border-radius 属性。border-top-left-radius 属性border-top-left-radius 属性定义左上角边框的形状。语法：border-bottom-right-radius: length|% length|%;值描述length定义左下角的形状。%以百分比值定义左下角的形状。border-top-right-radius 属性border-top-right-radius属性定义右下角边框的形状。语法：border-top-right-radius: length|% length|%;值描述length定义右上角的形

4、状。%以百分比值定义右上角的形状。一、语法：复制代码代码如下:border-radius ： none | 1,4 / 1,4 ?二、取值： 由浮点数字和单位标识符组成的长度值。不可为负值。三、说明：border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：1、border-radius: 1,4 ; /这里只有一个值，那么top-left、

5、top-right、bottom-right、bottom-left四个值相等2、border-radius: 1,4 1,4 ; /这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值3、border-radius: 1,4 1,4 1,4 ;/如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right4、border-radius: 1,4 1,4 1,4 1,4 ;/如果有四个值，其中第一个值是设置t

6、op-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left前面，我们主要看了border-radius的缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：复制代码代码如下:border-top-left-radius: /左上角border-top-right-radius: /右上角border-bottom-right-radius: /右下角border-bottom-left-radius: /左下角这里说一下，各角

7、拆分出来取值方式：中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。border-radius只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加上“-moz”，而Webkit内核需要加上“-webkit”等，那么我为了能兼容各大内核的老版浏览

8、器，我们看看border-radius在不同内核浏览器下的书写格式：1、Mozilla(Firefox, Flock等浏览器)复制代码代码如下:-moz-border-radius-topleft: /左上角-moz-border-radius-topright: /右上角-moz-border-radius-bottomright: /右下角-moz-border-radius-bottomleft: /左下角等价于：-moz-border-radius: /简写2、WebKit (Safari, Chrome等浏览器)复制代码代码如下:-webkit-border-top-left-rad

9、ius: /左上角-webkit-border-top-right-radius: /右上角-webkit-border-bottom-right-radius: /右下角-webkit-border-bottom-left-radius: / 左下角等价于：-webkit-border-radius: /简写3、Opera浏览器：复制代码代码如下:border-top-left-radius: /左上角border-top-right-radius: /右上角border-bottom-right-radius: /右下角border-bottom-left-radius: /左下角等价于：

10、border-radius: /简写4、Trident (IE)IE9不支持border-radius;IE9下没有私有格式，都是用border-radius，其写法和Opera是一样的，这里就不在重复。为了不管是新版还是老版的各种内核浏览器都能支持border-radius属性，那么我们在具体应用中时需要把我们的border-radius格式改成：复制代码代码如下:-moz-border-radius: none | 1,4 / 1,4 ?-webkit-border-radius: none | 1,4 / 1,4 ?border-radius: none | 1,4 / 1,4 ?其拆分

11、开来的格式相应需要加上-moz和-webkit，上面的代码其实就等价于下面的代码：复制代码代码如下:-moz-border-radius-topleft: /左上角-moz-border-radius-topright: /右上角-moz-border-radius-bottomright: /右下角-moz-border-radius-bottomleft: /左下角-webkit-border-top-left-radius: /左上角-webkit-border-top-right-radius: /右上角-webkit-border-bottom-right-radius: /右下角-

12、webkit-border-bottom-left-radius: / 左下角border-top-left-radius: /左上角border-top-right-radius: /右上角border-bottom-right-radius: /右下角border-bottom-left-radius: /左下角另外需要特别注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面，（特别声明：本文中所讲实例都只写了标准语法格式，如果你的版本不是上面所提到的几个版本，如要正常显示效果，请更新浏览器版本，或者在bord

13、er-radius前面加上相应的内核前缀，在实际应用中最好加上各种版本内核浏览器前缀。）我们初步来看一个实例：HTML代码：复制代码代码如下:为了更好的看出效果，我们给这个demo添加一点样式：复制代码代码如下:.demo width: 150px;height: 80px;border: 2px solid #f36;background: #ccc;注：如无特殊声明，本文实例所有基本代码格式如上所示，只在该元素上添加border-radius属性设置。复制代码代码如下:.demo border-radius: 10px 15px 20px 30px / 20px 30px 10px 15p

14、x;这种写法我们前面有提到过，“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL的顺序原则。为了能让大家更清楚理解，我们把上面代码换成如下：复制代码代码如下:.demo border-top-left-radius: 10px 20px;border-top-right-radius: 15px 30px;border-bottom-right-radius: 20px 10px;border-bottom-left-radius: 30px 15px;不仿看看他们的效果：三、支持的浏览器：上面我们介绍了border-radius的基本用法，以及在各大浏览器下的格式

15、等，下面我们通过实例来介绍其具体的用法：一：border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的：复制代码代码如下:.demo border-radius: 10px;其等价于：.demoborder-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;效果：二：border-radius设置两个值，此时top-left等于bottom-right并且他们取第一个值；top-right

16、等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同复制代码代码如下:.demo border-radius: 10px 20px;等价于：.demo border-top-left-radius: 10px;border-bottom-right-radius: 10px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;效果：三：border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left并且他们取第二个值，botto

17、m-right取第三个值复制代码代码如下:.demo border-radius: 10px 20px 30px;等价于.demo border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 30px;效果：四：border-radius设置四个值，此时top-left取第一个值，top-right取第二个值，bottom-right取第三个值.bottom-left取第四个值复制代码代码如下:.demo border

18、-radius:10px 20px 30px 40px;等价于.demo border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-right-radius: 30px;border-bottom-left-radius: 40px;效果：从上面四个实例中我们可以看出border-radius和border取值非常相似，我们border遵循TRBL原则（从上边右边下边左边分别对应1、2，3，4四个值），只不过border-radius换成了左上角(top-left)对就值1，右上角（top-right）对应

19、值2，右下角(bottom-right)对应值3，左下角(bottom-left)对应值4.上面四个实例都是水平和垂直半径相等情况下border-radius的应用，下面我们来看几个水平和垂直半径值不一样的实例：一、border-radius: 水平 / 垂直：只设置一个水平和一个垂直半径时，那么水平半径分别指定了元素个四个角的水平半径值，同样垂直半径指定了元素的垂直半径值，此时四个角具有相同的效果，因为他们具有相同的值复制代码代码如下:.demo border-radius: 10px / 20px;等价于：.demo border-top-left-radius: 10px20px;bor

20、der-top-right-radius: 10px 20px;border-bottom-right-radius: 10px 20px;border-bottom-left-radius: 10px 20px;效果：此时我们每个角不在是四分之一圆了，前面我们也说过，只有水平和垂直半径值相同时，他们才具有四分之一圆特性，这样一来，我们可以改变不同的半径值，制作一些特殊的图形效果，感兴趣的朋友可以自己在本地尝试一下各种不同的设置方式。二、border-radius: 水平1 水平2 / 垂直1 垂直2：设置了两个水平值和两个垂直值，此时我们top-left和bottom-right具有相同的水

21、平和垂直半径，也就是其中的水平1和垂直1；而top-right和bottom-left也具有相同的水平和垂直半径值，也就是水平2和垂直2，我们他拆分出来就是：复制代码代码如下:border-top-left-radius: 水平1 垂直1；border-bottom-right-radius: 水平1 垂直1；border-top-right-radius: 水平2 垂直2；border-bottom-left-radius: 水平2 垂直2;具体我们来看下面的实例：复制代码代码如下:.demo border-radius: 10px 20px / 20px 10px;等价于：.demo bo

22、rder-top-left-radius: 10px 20px;border-bottom-right-radius: 10px 20px;border-top-right-radius: 20px 10px;border-bottom-left-radius: 20px 10px;效果：上面两种都是相互对应的取值，我们来看一个实例，水平有三个取值，而 垂直只有两个取值复制代码代码如下:.demo border-radius: 10px 20px 30px / 50px 60px;等价于：.demo border-top-left-radius: 10px 50px;border-top-ri

23、ght-radius: 20px 60px;border-bottom-left-radius: 20px 60px;border-bottom-right-radius: 30px 50px;效果：我们从上面等价代码中可以知道，不管他们怎么取值，“/”前后各自按TRBL顺序取值。上面几种都是我们常见的一些应用，那下面我们来看几种特殊点的应用：一、对于border-radius还有一个内半径和外半径的区别，它主要是元素 边框值较大时，效果就很明显，当我们border-radius半径值小于或等于border的厚度时，我们边框内部就不具有圆角效果,例如下面的实例复制代码代码如下:.border-

24、big border: 15px solid green;border-radius: 15px;效果：我们接着上面这个例子，把 border-radius半径值改成比边框值大一点：复制代码代码如下:.border-small border: 15px solid green;border-radius: 25px;效果：为何当border-radius的半径小于元素边框的厚度时，内部没有圆角效果？我在这里说一下，因为我们的border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。二、如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。复制代码代码如下:.demo border-width: 10px 5px 20px 3px;border-radius: 30px;效果：三、相邻两条边颜色和线条样式不同时，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条