• 盒子模型的组成
  首先上一张图片：
  
  从这张图片可以看出，每个盒子在页面中都占据特定的空间，占据的实际空间是由“内容”+内边距+外边距+边框组成。
  2.边框设置
  边框大的样式涉及了颜色(color)、宽度(width)和风格(style)3方面
  2.1边框风格设置
  设置边框风格的时候可以设置上下左右四个边框的风格

设置语法如下：
border-style:style [style] [style] [style]；
boder-方向-style：style ；
style参数值

• 边框风格属性取一个值时，表示四个方向的风格一致
• 边框风格属性取2个值时，第一个参数设置上、下边框风格，第二个参数设置左、右边框的风格
• 边框风格属性取3个值时，第一个参数设置上边框风格，第二个设置左、右边框的风格，第三个参数设置下边框的风格
• 边框风格属性取4个值时，按顺时针方向依次设置上、右、下、左边框的风格
  2.2边框宽度的设置

设置语法如下：

border-width:width_value [width_value] [width_value] [width_value] |inherit;
border-方向-width： width_value |inherit;

宽度值

• 边框宽度取1个值时，表示4个方向的宽度一样
• 边框宽度取2个值时，第一个值设置上、下边框的宽度，第二个值设置左、右边框的宽度
• 边框宽度取3个值时，第一个值设置上边框的宽度，第二个值设置左、右边框的宽度，第三个值设置下边框的宽度
• 边框宽度取4个值时，按顺时针方向依次设置上、右、下、左边框的宽度

注意：要使边框宽度有效，必须保证border-style的属性值不是none，反之要使边框风格属性设置有效，必须保证不能显示设置边框宽度为0.

2.3边框颜色

设置语法如下：

border-color:color_value  [color_value] [color_value] [color_value]|inherit；
border-方向-color: color_value |inherit;

color_value用于设置边框颜色，值可以是表示英文单词或颜色的十六进制数或颜色的rgb值。

• 1个参数时，表示四个方向的颜色色一致
• 2个参数时，第一个参数设置上、下边框的颜色，第二个参数设置左、右边框的颜色
• 3个参数时，第一个参数设置上边框颜色，第二个设置左、右边框的颜色，第三个参数设置下边框的颜色
• 4个参数时，按顺时针方向依次设置上、右、下、左边框的颜色

2.4统一设置边框的宽度、颜色和风格

设置语法如下：

border: border-width border-style border-color;
border-方向:border-width border-style border-color;

注：三个参数的位置任意。