css3中的border属性值
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 |
如图中所示区域，A\B\C\D四个区域中的切割图片分别作用在了border的四个角上。
而1\2\3\4四个部分的切割图片分别作用在了border的四条边上。
中间部分不作用。
上下区域1和3区域受到水平方向效果影响：如果是repeat作用此区域图片会水平重复，如果是round则水平平铺；如果是stretch则被水平拉伸。
左右区域2和4区域受竖直方向影响，如果是如果是repeat作用此区域图片会竖直重复，如果是round则竖直平铺；如果是stretch则被竖直拉伸。
3、边框的宽度：border-image-width；
4、图片的排列方式：border-image-repeat。
接受一个、两个参数，表示水平方向或竖直方向。
