当前位置: 首页 > CSS3学习笔记 > 正文

CSS3边框 —— 用border-radius 属性制作圆角矩形

在CSS2中添加圆角矩形,我们必须在每个圆角使用不同的图片作为背景。而CSS3中border-radius的出现,让我们创建圆角变的非常容易。其优点:一、减少网站维护的工作量(图片制作,代码替换等);二、提高网站的性能,少了图片的http请求;三、增加视觉美观性。

既然border-radius有这么多好处,我们就从它的语法、属性和属性值等方面来看其如何应用,又是如何制作圆角,还有就是除了制作圆角他还能制作什么?

一、语法:

border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
或
border-radius: none | <percentage>{1,4} [/ <percentage>{1,4} ]?

二、取值:

<length>:用长度值设置对象的圆角半径长度。不可为负值
<percentage>:用百分比设置对象的圆角半径长度。不可为负值

三、说明:

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

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

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

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

4、border-radius:[ <length> ] [ <length> ] [ <length>> ] [ <length> ]; //如果有四个值,那么依次对应top-left、top-right、bottom-right、bottom-left。

上面,我们看了border-radius的缩写格式,其实border-radius和border属性一样,还可以把各个角单独拆分出来,也就是以下四种写法:

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,那么这个角就不是圆角。

四、浏览器支持

只有在: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)
IE9以下版本不支持border-radius,也没有私有格式,都是用border-radius,其写法和Opera是一样。

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

-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
-webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

五、border-radius圆角实例

注意:本文中的实例只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或在border-radius前面加上相应的内核前缀。

我们初步来看一个实例:

<div class="demo"></div>

为了更好的看出效果,我们给这个demo添加一点样式:

.demo {
  width: 150px;
  height: 80px;
  border: 2px solid #f36;
  background: #ccc;
}

注:如无特殊说明,本文实例所有基本代码格式如下,只在该元素上添加border-radius属性设置。

.demo {
  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}

这种写法我们前面有提到过,“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循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制作圆角

上面我们介绍了border-radius的基本用法,以及在各大浏览器下的格式等,下面我们通过实例来介绍其具体的用法:

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

.demo1 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 10px; /*4个角的值相等*/
}

效果:
border-radius制作圆角1

2:border-radius设置两个值,此时元素左上角和右下角相同,右上角和左下角相同

.demo2 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 5px 10px;
}

效果:
border-radius制作圆角2

3:border-radius设置三个值,此时左上取第一个值,右上等于左下并且他们取第二个值,右下取第三个值:

.demo3 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 5px 10px 15px;
}

效果:
border-radius制作圆角3

4:border-radius设置四个值,此时top-left取第一个值,top-right取第二个值,bottom-right取第三个值.bottom-left取第四个值

.demo4 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 5px 10px 15px 20px;
}

效果:
border-radius制作圆角4

5:接下来看看细分了水平半径和垂直半径的情况:

.demo5 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 20px / 40px;  /*水平半径/垂直半径*/
}

效果:
border-radius制作圆角5

可以看到,水平和垂直半径的值分开设置了,不再一样,还是可以1,2,3,4对号入座,只是水平和垂直半径分开了而已。
20px / 40px 斜杠‘/’前面的是水平半径的值,后面是垂直半径的值。同样,每个角的水平和垂直半径也可以分别设置成不一样的,如下:

.demo6 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 10px 20px 15px 30px / 40px 5px 30px 10px;  /*水平半径/垂直半径*/
}

效果:
border-radius制作圆角6

每个角都设置了不同的水平和垂直半径,各有风骚了。不管怎么设置值,都可以从左上角开始一一对号入座,没有取到值的,就取对角的值。

6:用border-radius画圆

.demo7 {
    width: 80px;
    height: 80px;
    background: #3ad7d7;
    /*border: 2px solid #ff0000;*/
    border-radius: 40px;
}

效果:
用border-radius画圆

不带边框的圆,只需宽和高相等,border-radius为宽高的一半就可以了。如果是有边框的圆形,还要加上边框的一半,这里就不举例了。

那么到此,我们用border-radius制作圆角的一些用法就介绍完了。

CSS3边框 —— 用border-radius 属性制作圆角矩形:等您来吐槽!

CSS3边框 —— 用border-radius 属性制作圆角矩形:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!