CSS 3基础（二）——边框

一、边框的基本属性

1、border：这是一个复合属性，用于设置目标组件的边框样式。可以同时设置边框的粗细、线形、颜色

2、border-color：用于设置边框的颜色。

      a、如果提供4个参数值，则将按上、右、下、左的顺序依次设置4个边框的颜色

      b、如果提供3个参数，则第一个用于上边框的颜色，第二个用于左、右两个边框的颜色，第三个用于下边框的颜色

      c、如果提供2个参数，则第一个用于设置上、下两个边框的颜色，第二个用于设置左、右两个边框的颜色

      d、如果只提供1个参数，则将用于4个边框的颜色

3、border-style：用于设置边框的线形。（其属性值有：none、dotted、dashed、solid、double、groove、ridge、inset、outset）

      a、如果提供4个参数值，则将按上、右、下、左的顺序依次设置4个边框的线形

      b、如果提供3个参数，则第一个用于上边框的线形，第二个用于左、右两个边框的线形，第三个用于下边框的线形

      c、如果提供2个参数，则第一个用于设置上、下两个边框的线形，第二个用于设置左、右两个边框的线形

      d、如果只提供1个参数，则将用于4个边框的线形

4、border-width：用于设置边框的线框

      a、如果提供4个参数值，则将按上、右、下、左的顺序依次设置4个边框的线宽

      b、如果提供3个参数，则第一个用于上边框的线宽，第二个用于左、右两个边框的线宽，第三个用于下边框的线宽

      c、如果提供2个参数，则第一个用于设置上、下两个边框的线宽，第二个用于设置左、右两个边框的线宽

      d、如果只提供1个参数，则将用于4个边框的线宽

5、border-top：这是一个复合属性，用于设置目标组件的上边框的样式，可以同时设置边框的粗细、线形、颜色

      （1）border-top-color：设置上边框的颜色

      （2）border-top-style：设置上边框的样式

      （3）border-top-width：设置上边框的线宽

6、border-right：这是一个复合属性，用于设置目标组件的右边框的样式，可以同时设置边框的粗细、线形、颜色

      （1）border-right-color：设置右边框的颜色

      （2）border-right-style：设置右边框的样式

      （3）border-right-width：设置右边框的线宽

7、border-bottom：这是一个复合属性，用于设置目标组件的下边框的样式，可以同时设置边框的粗细、线形、颜色

      （1）border-bottom-color：设置下边框的颜色

      （2）border-bottom-style：设置下边框的样式

      （3）border-bottom-width：设置下边框的线宽

8、border-left：这是一个复合属性，用于设置目标组件的左边框的样式，可以同时设置边框的粗细、线形、颜色

      （1）border-left-color：设置左边框的颜色

      （2）border-left-style：设置左边框的样式

      （3）border-left-width：设置左边框的线宽

9、border-shadow：该属性用于设置边框阴影。（一般来说有5个值）

      例：

             border-shadow：10px, 20px, 30px, 40px, black;

      分析：

             其中10px：相对于左边margin外边距的距离

             20px：相对于上边margin外边距的距离

             30px：模糊度，其模糊值越大越模糊

             40px：阴影的大小

             black：颜色

10、none：无边框

11、hidden：隐藏边框

12、dotted：点线边框

13、dashed：虚线边框

14、solid：实现边框

15、double：双线边框

16、groove：3D凹槽边框

17、ridge：3D凸槽边框

18、inset：3D凹入边框

19、outset：3D凸出边框

二、边框的渐变

1、border-top-colors：该属性用于设置目标组件的上边框颜色。如果设置上边框的宽度是Npx，那么就可以为该属性设置N种颜色，每种颜色显示1px的宽度。但如果设置的颜色数量小于边框的宽度，那么最后一个颜色将会被覆盖边框剩下的宽度。

2、border-right-colors：该属性用于设置目标组件的右边框的颜色。该属性指定的多个颜色值的意义与border-top-colors属性里的各颜色值的意义相同

3、border-bottom-colors：该属性用于设置目标组件的下边框的颜色。该属性指定的多个颜色值的意义与border-top-colors属性里的各颜色值的意义相同

4、border-left-colors：该属性用于设置目标组件的左边框的颜色。该属性指定的多个颜色值的意义与border-top-colors属性里的各颜色值的意义相同

三、边框角的弧度

1、border-top-left-radius：该属性用于设置左上角的圆角半径

2、border-top-right-radius：该属性用于设置右上角的圆角半径

3、border-bottom-left-radius：该属性用于设置左下角的圆角半径

4、border-bottom-right-radius：该属性用于设置右下角的圆角半径