CSS3的Border-radius轻松制作圆角

前面系统了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，具体实现过程我就不在多讲，只看方法就知道烦死人。

如今CSS3中的border-radius出现后，让我们没有那么多的烦恼了，制作圆角图片的时间是省了，而且其还有多个优点其一减少网站的维护的工作量，少了对图片的更新制作，代码的替换等等;其二、提高网站的性能，少了对图片进行http的请求，网页的载入速度将变快；其三增加视觉美观性。既然border-radius有这么多好处，我们就从他的语法，属性和属性值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧

一、语法

<length> 由浮点数字和单位标识符组成的长度值。不可为负值。

三、说明

border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。其四个值是按照-left、-right、bottom-right、bottom-left的顺序来设置的其主要会有狼蚁网站SEO优化几种情形出现

1、border-radius: [ <length>{1,4} ]; //这里只有一个值，那么-left、-right、bottom-right、bottom-left四个值相等

2、border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ; //这里设置两个值，那么-left等于bottom-right，并且取第一个值；-right等于bottom-left，并且取第二个值

3、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];//如果有三个值，其中第一个值是设置-left;而第二个值是-right和bottom-left并且他们会相等,第三个值是设置bottom-right

4、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];//如果有四个值，其中第一个值是设置-left;而第二个值是-right,第三个值bottom-right,第四个值是设置bottom-left

前面，我们主要看了border-radius的缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看狼蚁网站SEO优化

border-radius只有在以下版本的浏览器Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加上“-moz”，而Webkit内核需要加上“-webkit”等，那么我为了能兼容各大内核的老版浏览器，我们看看border-radius在不同内核浏览器下的书写格式

1、Mozilla(Firefox, Flock等浏览器)

IE<9不支持border-radius;IE9下没有私有格式，都是用border-radius，其写法和Opera是一样的，这里就不在重复。

为了不管是新版还是老版的各种内核浏览器都能支持border-radius属性，那么我们在具体应用中时需要把我们的border-radius格式改成

其拆分开来的格式相应需要加上-moz和-webkit，上面的代码其实就等价于狼蚁网站SEO优化的代码

我们初步来看一个实例

HTML代码

三、支持的浏览器

上面我们介绍了border-radius的基本用法，以及在各大浏览器下的格式等，狼蚁网站SEO优化我们通过实例来介绍其具体的用法

一border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的

二border-radius设置两个值，此时-left等于bottom-right并且他们取第一个值；-right等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同

三border-radius设置三个值，此时-left取第一个值，-right等于bottom-left并且他们取第二个值，bottom-right取第三个值

四border-radius设置四个值，此时-left取第一个值，-right取第二个值，bottom-right取第三个值.bottom-left取第四个值

从上面四个实例中我们可以看出border-radius和border取值非常相似，我们border遵循TRBL原则（从上边右边下边左边分别对应1、2，3，4四个值），只不过border-radius换成了左上角(-left)对就值1，右上角（-right）对应值2，右下角(bottom-right)对应值3，左下角(bottom-left)对应值4.

上面四个实例都是水平和垂直半径相等情况下border-radius的应用，狼蚁网站SEO优化我们来看几个水平和垂直半径值不一样的实例

一、border-radius: 水平 / 垂直只设置一个水平和一个垂直半径时，那么水平半径分别指定了元素个四个角的水平半径值，同样垂直半径指定了元素的垂直半径值，此时四个角具有相同的效果，因为他们具有相同的值

此时我们每个角不在是四分之一圆了，前面我们也说过，只有水平和垂直半径值相，他们才具有四分之一圆特性，这样一来，我们可以改变不同的半径值，制作一些特殊的图形效果，感兴趣的朋友可以自己在本地尝试一下各种不同的设置方式。

二、border-radius: 水平1 水平2 / 垂直1  垂直2设置了两个水平值和两个垂直值，此时我们-left和bottom-right具有相同的水平和垂直半径，也就是其中的水平1和垂直1；而-right和bottom-left也具有相同的水平和垂直半径值，也就是水平2和垂直2，我们他拆分出来就是

上面两种都是相互对应的取值，我们来看一个实例，水平有三个取值，而 垂直只有两个取值

我们从上面等价代码中可以知道，不管他们怎么取值，“/”前后各自按TRBL顺序取值。

上面几种都是我们常见的一些应用，那狼蚁网站SEO优化我们来看几种特殊点的应用

一、对于border-radius还有一个内半径和外半径的区别，它主要是元素 边框值较大时，效果就很明显，当我们border-radius半径值小于或等于border的厚度时，我们边框内部就不具有圆角效果,例如狼蚁网站SEO优化的实例

我们接着上面这个例子，把 border-radius半径值改成比边框值大一点

为何当border-radius的半径小于元素边框的厚度时，内部没有圆角效果？我在这里说一下，因为我们的border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。

二、如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。

三、相邻两条边颜色和线条样式不，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。我们来看一个四边颜色不一样，宽度不一样的实例

上面这几种是比较特殊点的用法，如果大家还想通过border-radius制作更多不同形状，或者更多的应用，可以点击这里。

border-radius能应用在各种元素中，但在img和table应用时会有点差别的，先来看图片上应用border-radius时的情况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常，而在其他浏览器都不能对图片进行剪切，我们先来看一个实例

左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我们可以看得出，图片根本就没有圆角效果，右图是在Firefox4.0下的效果，低于这个版本的和左图一样效果，如果需要达成一致效果，大家就必须放弃border-radius而采用CSS2制作圆角的老办法。table的样式属性border-collapse是collapse时,border-radius不能正常显示,只有border-collapse: separate;时才能正常显示。

那么到此，我们border-radius的一些用法就介绍完了。希望能给大家带来一点帮助，感兴趣的朋友可以观注本站后面的内容，我们下节将介绍CSS3中的文字阴影text-shadow的用法。更希望感兴趣的朋友一起探讨和学习CSS3更多的技术知识。