CSS3--２－－border

                                css3 border（border实例.html）
A--
        设置元素的边框风格。　
    
B--ｃｓｓ
        border-width: 设置元素边框的粗细
        border-color:　设置元素边框的颜色
        border-style: 设置元素边框的类型
    
        ～～～缩写：    border: border-width border-style border-color (border: 3px none red)
            －－－遵循TRBL   border-top(right,bottom,left)-style    （同width, color）
            border-style: solid;    //一个值的时候，四边都是solid类型
            border-style: solid dotted    //两个值，第一个：上下，第二个：左右
            border-style: solid dotted dashed     //三个值，第一个：顶边，第二个：左右，第三个：底边
            border-style: solid(实线) dotted（点状线） dashed（虚线） inset    //四个值，第一个：顶边，第二个：右边，第三个：下边，
                                                    ／／第四个：左边
        ～～～border-style
        none:     无边框
        hidden: 与none相同，常用于解决边框冲突
        dotted: 点状边框
        dashed: 虚线边框
        solid:    实线边框
        double: 双线，宽度取决与border-width
        groove: 定义３d凹槽边框，效果取决于border-color
        ridge:    定义３d垄庄边框，效果取决于border-color
        inset:    定义３d inset边框，效果取决于border-color
        outset: 定义３d　outset边框，效果取决于border-color
        inherit:从父元素继承边框样式
 
Ｃ--CSS3
    
        border-color    （推广度　低）
        
                更多颜色，标准写法拆分成四个边框 (border-...-colors(pl.))
                    ###border-top-colors:[<color>|transparent]{1,4}|inherit
                    ###border-right-colors:[<color>|transparent]{1,4}|inherit
                    ###border-bottom-colors:[<color>|transparent]{1,4}|inherit
                    ###border-left-colors:[<color>|transparent]{1,4}|inherit
                目前使用前缀：
                    Mozilla(常Firefox) -moz-
                    OPera         -o-
                    Konqueror     -khtml-
                    Internet Explorer -ms-
                        eg.    -moz-border-top-colors: #111 #222 #333 #444 #555;
                可利用-prefix-free插件略去浏览器前缀
                ！！！　border-color设置颜色值：
 
                    １个：    与css1中相同
                    ｎ个：　边框宽度为n,n个颜色，每种像素显示一种颜色
                    Ｘ个：　宽度值>颜色值，　最后一种颜色显示剩余的宽度
    
        border-image
                基本语法：
                border-image: none | <image> [<number> | <percentage>] {1,4}
                    　[/ [border-width>{1,4} ] ?[stretch | repeat | round]{0,2}
                    解释－－－－－－－－－－－－－
                    none:        默认值
                    <image>     设置背景图片，跟background一样,可以使用绝对地址和相对地址，来指定边框的背景图片
                    <number>    number是一个数值，用来设置边框或者边框背景图片的大小，单位：像素；使用１－４个值表示４个方位
                    <percentage>    百分比
                    stretch,repeat,round    这三个属性参数是用来设置边框背景图片的铺放方式,like background-repeat;
                                stretch:拉伸（默认）；　repeat:重复；　round:平铺边框；
                ###border-image-source:    引入背景图片        url(image url);  
                ###border-image-slice:    切割引入背景图片    [<number> | <transparent>] {1,4} && fill ?    
                                            number        ：没有单位，默认px。
                                            fill        ：图片边界的中间部分将保留下来
                                
 
                                        图片九宫格
                    border-top-left-image         border-top-image    border-top-right-image
                    border-left-image        中间            border-right-image
                    border-bottom-left-image    border-bottom-image    border-bottom-right-image
            
                ###border-image-width:    边框图片的宽度        
                    语法：    border-image-width:     [<length> | <percentage> | <number> | auto] {1,4}
            
                ###border-image-repeat:    边框背景图片的排列方式    
                    语法：　border-image-repeat:    [stretch | repeat | round] {1,2}
                            !!!不支持trbl，　只有两个参数：　水平和垂直
            ！！！border-image: [source] || [slice] || [/width] || [repeat]　必须写在一起
    
        border-radius    :常见（取值为none不能取消圆角，需要设置值为０）
                语法：    border-radius: none | <length>{1,4} [/<length>{1,4}] ?
                            /前面：　设置水平方向半径
                            /后面：　设置垂直方向半径　（无/。　水平垂直相同）
                    length{1}        相同
                    length{2}    左上、右下 取第一个值；    右上、左下　取第二个值
                    length{3}    左上：　第一个值；    右上、左下：　第二个值；        右下：　第三个值；
                    length{4}    左上、右上、右下、左下
                (不过派生的border-radius子属性不相同)
                ＃＃＃＃border-top-left-radius: <length>／<length>
                ＃＃＃＃border-top-right-radius: <length>/<length>
                ＃＃＃＃border-bottom-left-radius: <length>/<length>
                ＃＃＃＃border-bottom-right-radius: <length>/<length>
                我的firefox:
                ####　-moz-border-radius-topleft:<length>/<length>
                #### -moz-border-radius-topright:<length>/<length>
                #### -moz-border-radius-bottomleft:<length>/<length>
                #### -moz-border-radius-bottomright:<length>/<length>
                特殊应用：
                    １：内外半径
                        ＝＝＝＝当border-radius小于border的厚度时候，边框内部就不具有圆角效果
                        border-radius与border差：
                            <=0    :　内角为直角
                            >0    :  内角有幅度
                    ２：相邻边宽度不同，角会从宽的边平滑过度到窄的一边，其中一条边可以是０，相邻转角由大向小变化
                        ＝＝＝＝45°：两条相邻边宽度相同
                            30°: 其中一条边是另外一条边的两倍
                        界定这个转变的线就是连接在内外曲线上的两个点的直线
                ！！！表格元素table使用border-radius的时候，当元素属性border-collapse为separate的时候才会显示圆角
                    （详情参照　border实例.html)
 
            
            
        box-shadow    :css3的盒子阴影特性应用广泛
            用法：    box-shadow:none |
                 [ <length> <length> <length>?<length>? || <color> ],[ <length> <length> <length>?<length>? || <color> ]+
            简写：　box-shadow: none |
                [inset x-offset y-offset blur-radius spread-radius color], [inset x-offset y-offset blur-radius spread-radius color]
                可以使用一个或者！多个（先写的阴影将在最上层）！投影，其中用‘，’分隔开
            说明：
                none:         默认，无阴影
                inset:        阴影类型，选值。默认，外阴影；inset,内阴影；
                x-offset:    阴影水平偏移量，正负值。＋右边；－左边
                y-offset:    阴影垂直偏移量，正负值。＋底边；－顶边
                blur-radius:    模糊半径。正值！　０：阴影不具备模糊效果，越大阴影边缘越模糊
                spread-radius:    扩展半径。正负值！　＋：都延展；　－都缩小（单独使用可实现border效果，但并非真正边框，只是一层阴影）
                color:        颜色。    不设定将默认值。建议取值
            ！！！非０值的border-radius以相同的作用影响阴影的外形，border-image不会影响阴影的任何外形
                对象阴影同盒模型层次一样，外阴影会在对象背景之上，内阴影会在！背景！图片（对图片无作用）之上。
                背景图片在背景色之上，背景色在外阴影之上。