CSS3的圆角Border-radius_html/css_WEB-ITnose

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

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

一、语法：

border-radius ： none |  {1,4} [/  {1,4} ]?

二、取值：

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

三、说明：

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

1、border-radius: [ {1,4} ]; //这里只有一个值，那么top-left、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-right

4、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有四个值，其中第一个值是设置top-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:       //左下角

这里说一下，各角拆分出来取值方式：中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。

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等浏览器)

-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-radius:  //左上角  -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: //左下角    等价于：   border-radius: //简写

4、Trident (IE)

为了不管是新版还是老版的各种内核浏览器都能支持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} ]?

其拆分开来的格式相应需要加上-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:     //右下角  -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后面，（特别声明：本文中所讲实例都只写了标准语法格式，如果你的版本不是上面所提到的几个版本，如要正常显示效果，请更新浏览器版本，或者在border-radius前面加上相应的内核前缀，在实际应用中最好加上各种版本内核浏览器前缀。）

我们初步来看一个实例：

HTML代码：

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114803

更新时间：2022-11-17 阅读：39次