边框

1、基本属性：

border：border-width  border-style border-color

border-width（默认3px，单位px）

border-style（必写，none：无边框，solid:实线，dotted：点状边框,dashed:虚线边框，    double：双线，groove：3d凹槽……）

border-color（默认黑色）

2、基本属性细化：

同于基本初始化，border-style没有默认值，必须定义才能正常显示

（1）border-width：2px//四条边宽均为2

border-width:1px  2px//上下边宽1 左右边宽2

border-width:1px  2px 3px//上1 左右2 下3

border-width:1px  2px 3px//上右下左

（2）border-style同上

（3）border-color同上

3、多层颜色边框（仅火狐浏览器适用）：

-moz-border-top-colors: #008000 #000000#A52A2A #FFE4C4;

4、图片边框：

border-image:url(img/border-image-nine.png) 80 repeat;

-webkit-border-image:url(img/border-image-nine.png) 80 repeat;

-moz-border-image: url(img/border-image-nine.png)80 repeat;

左图为img/border-image-nine.png，右图为浏览器中的截图。

其中80是边框宽度，不能带单位，边框设置为border: 80px solid green;

最后的效果可选repeat、round、streth的任意组合。

5、圆角属性：

（1）      border-radius: 4px

边框四个圆角均为4px

（2）      border-radius: 4px  2px

top-left和bottom-right为4px，top-right和bottom-left为2px

（3）      border-radius: 4px  1px  2px

top-left:4，top-right=bottom-left:1，bottom-right：2

（4）      border-radius: 4px  3px  2px  1px

top-left:4，top-right:3，bottom-right:2，bottom-left:1

6、圆角属性细化：

（1）      角度变为水平/垂直比：

border-radius: 40px / 20px

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

……

（2）      定位到一个角，单独设置：

border-top-left-radius: 10px  20px

border-bottom-left-radius: 30px  20px

单独设置时不用加斜线

为了保证兼容性，前面最好加上-moz和-webkit

7、图片应用圆角：

img{

                     border:5px solid green;

                     border-radius:3px;

            }

8、表格应用圆角：

table{

                     margin:10px;

                     border:5px solid green;

                     border-radius:10px;

            }

/*表格应用圆角：border-collapse: separate时才有效*/

            .t1{

                     border-collapse:collapse;

            }

            .t2{

                     border-collapse:separate;

            }

9、阴影属性

（1）box-shadow:(inset) x-offset(水平偏移)  y-offset(垂直偏移)  blur-radius(模糊半径)

                  spread-radius(扩展半径) color

设置内阴影时把inset写上

（2）单边阴影：

box-shadow: 0-2px 0 red //上阴影

box-shadow:2px 00 red//右阴影

         ……

（3）四边阴影：

         box-shadow:00 10px red

或box-shadow:0 0 10px-10px red

（4）多层阴影：

         Box-shadow:0 0 10px red,

                               0 0 13px green,

                                     ……