CCS盒子模型之边框属性设置

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

属性	描述
border-style	简写属性，同时设置边框4个方向的风格
border-bottom-style	设置下边框的风格
border-left-style	设置左边框的风格
boder-right-style	设置右边框的风格
border-top-style	设置上边框的风格

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

参数值	描述
none	无边框，模式值
dotted	边框为点状
dashed	边框为虚线
solid	边框为实线
double	边框为双实线
groove	边框为3D凹槽
ridge	边框为3D垄状
inset	边框内嵌一个立体边框
ouset	边框外嵌一个立体边框
inherit	指定从父元素继承边框样式

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

属性	描述
border-width	简写属性，同时设置边框4个方向的宽度
border-bottom-width	设置下边框的宽度
border-left-width	设置左边框的宽度
border-right-width	设置右边框的宽度
border-top-width	设置上边框的宽度

设置语法如下：

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

宽度值

宽度值	描述
length	具体某个数值，单位可以时px或em
thin	细边框
medium	中等边框，默认值
thick	粗边框
inherit	指定从父元素继承边框宽度

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

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

2.3边框颜色

属性	描述
border-color	简写属性，同时设置边框四个方向的颜色
border-bottom-color	设置下边框颜色
border-left-color	设置左边框颜色
border-right-color	设置右边框颜色
border-top-color	设置上边框颜色

设置语法如下：

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-bottom	同时设置下边框的颜色、宽度和风格
border-left	同时设置左边框的颜色、宽度和风格
border-right	同时设置右边框的颜色、宽度和风格
border-top	同时设置上边框的颜色、宽度和风格

设置语法如下：

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

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