CSS3中有关于Border的属性一共有三个：圆角border-radius,边框多颜色border-color，图片边框border-image，其中圆角border-radius是常用的一个属性，而且现在很多网站制作圆角效果都使用border-radius来实现；本文会依次介绍这三个属性；

Border-radius:

一、语法：

Border-radius:[length|percentage]{1,4}[/[length|percentage]{1,4}]? 

 

二、取值：

Length：具体数值；

Percentage：百分比，相对于宽高的百分比；

Border-radius是一种缩写形式，如margin；

 

当border-radius：x//一个值，表示top-left、top-right、bottom-right、bottom-left四个值相等，等于x 。

当border-radius：x n //两个值，表示：top-left == bottom-right == x、top-right == bottom-left == n，简单地说就是对角相等；

当border-radius：x n m  //三个值，表示top-left == x 、top-right == bottom-left == n、bottom-right == m；

当border-radius：x n m s //四个值，表示top-left == x 、top-right ==n、bottom-right == m、 bottom-left == s；

 

例：

border-radius:10px 20px 30px 40px;

border-radius:10px 20px 30px 40px / 40px 30px 20px 10px;

border-radius:10px 20px/10px 30px 40px;

其中“/”前为水平方向，“/”后为垂直方向，如果没有“/”,则默认水平垂直相等；

最后一句表示对某一角做水平垂直的单独设置；

 

拆分角的书写方式：

border-top-left-radius: <length>  <length>   //左上角

border-top-right-radius: <length>  <length>  //右上角

border-bottom-right-radius:<length>  <length>  //右下角

border-bottom-left-radius:<length>  <length>   //左下角

在border-radius属性中，四个角的方向是由Y轴 – X轴 定的，这就是为什么我们看到top/bottom在前，left/right在后的道理了。

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

另注：为了浏览器版本兼容，属性上还是要交内核前缀如：-moz-border-radius和-webkit-border-radius等，但border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面。

 

 

Border-color:

浏览器支持情况：Mozilla的Firefox3.0+浏览器；

一、语法：

border-colors：color；

宽度设置了N px,那么你可以在这个边框上使用N种颜色；

并且，border-colors：color color color …缩写格式是错误的。

正确的书写格式：

-moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

-moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

-moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

-moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;

例如这种分开写；

 

Border-image:

一、语法：

 border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

二、参数：

1、none:是border-image的默认值，如果取值为none时，表示边框无背景图片；

2、<image>：设置border-image的背景图片，这个跟background-image一样，使用绝对或相对的url地址，来指定背景图片；

3、<number>：number是一个数值，用来设置边框的宽度，其单位是px，其实就像border-width一样取值，可以使用1~4个值，其具体表示四个方位的值，大家可以参考border-width的设置方式；

4、<percntage>：percntage也是用来设置边框的宽度，跟number不同之处是，其使用的是百分比值来设置边框宽度；

5、stretch,repeat,round:他们是用来设置边框背景图片的铺放方式，类似于background-position，其中stretch是拉伸，repeat是重复，round是平铺，stretch为默认值。

border-image分解为：

1、引入图片：border-image-source;

2、切割引入的图片：border-image-slice；

 border-image-slice: [ <number> | <percentage>]{1,4}&& fill?

简单的说是根据这个属性的参数把背景图切割成了九宫格如：

 A

1

B

4

中间部分

2

D

3

C

如图中所示区域，ABCD四个区域中的切割图片分别作用在了border的四个角上。

而1234四个部分的切割图片分别作用在了border的四条边上。

中间部分不作用。

上下区域1和3区域受到水平方向效果影响：如果是repeat作用此区域图片会水平重复，如果是round则水平平铺；如果是stretch则被水平拉伸。

左右区域2和4区域受竖直方向影响，如果是如果是repeat作用此区域图片会竖直重复，如果是round则竖直平铺；如果是stretch则被竖直拉伸。

3、边框的宽度：border-image-width；

4、图片的排列方式：border-image-repeat。

接受一个、两个参数，表示水平方向或竖直方向。