CSS学习(11)--边框属性

border                        版本：CSS1　 兼容性：IE4+ NS4+　继承性：无
 
语法：
 
border : border-width || border-style || border-color
 
参数：
 
该属性是复合属性。
 
说明：
 
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为：medium none。border-color的默认值将采用文本颜色。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。  
 
示例： 

1 p { border: thick double yellow; } 
2 blockquote { border: dotted gray; } 
3 p { border: 25px; } 

border-color             版本：CSS1　 兼容性：IE4+ NS6+　继承性：无
 
语法：
 
border-color : color
 
参数：
 
color : 　指定颜色。
 
说明：
 
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width等于0或border-style设置为none，本属性将失去作用。 
 
示例： 

1 ody { border-color: silver ;red; } 
2 body { border-color: silver red RGB(223, 94, 77); } 
3 body { border-color: silver red RGB(223, 94, 77) black; } 

border-style             版本：CSS1　 兼容性：IE4+ NS4+　继承性：无

语法：
 
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
 
参数：
 
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边
 
说明：
 
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width不大于0，本属性将失去作用。 
 
示例： 

1 body { border-style: double groove; } 
2 body { border-style: double groove dashed; }

border-width            版本：CSS1　 兼容性：IE4+ NS4+　继承性：无
 
语法：
 
border-width : medium | thin | thick | length
 
参数：
 
medium : 　默认宽度
thin : 　小于默认宽度
thick : 　大于默认宽度
length : 　由浮点数字和单位标识符组成的长度值。不可为负值。
 
说明：
 
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-style设置为none，本属性将失去作用。 
 
示例： 

1 span { border-style: solid; border-width: thin; } 
2 span { border-style: solid; border-width: 1px thin; } 

border-top                版本：CSS1　 兼容性：IE4+ NS6+　继承性：无

语法：
 
border-top : border-width || border-style || border-color
 
参数：
 
该属性是复合属性。
 
说明：
 
请参阅border属性。
 
示例： 

1 div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; } 

border-top-color     版本：CSS2　 兼容性：IE4+ NS6+　继承性：无

语法：
 
border-top-color : color
 
参数：
 
color : 　指定颜色。
 
说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width等于0或border-style设置为none，本属性将失去作用。
 
示例： 

1 div { border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;}

 border-top-style     版本：CSS2　 兼容性：IE4+ NS6+　继承性：无
 
语法：
 
border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
 
参数：
 
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边
 
说明： 

要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width不大于0，本属性将失去作用。 
 
示例： 

1 body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; } 

border-top-width    版本：CSS1　 兼容性：IE4+ NS4+　继承性：无
 
语法：
 
border-top-width : medium | thin | thick | length
 
参数：
 
medium : 　默认宽度
thin : 　小于默认宽度
thick : 　大于默认宽度
length : 　由浮点数字和单位标识符组成的长度值。不可为负值。

说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-style设置为none，本属性将失去作用。
 
示例： 

1 span { border-top-width: thin; border-top-style: solid; } 
2 span { border-bottom-width: thin; border-bottom-style: solid; } 
3 span { border-left-width: thin; border-left-style: solid; } 
4 span { border-right-width: thin; border-right-style: solid; } 

border-right              版本：CSS1　 兼容性：IE4+ NS6+　继承性：无

语法：
 
border-right : border-width || border-style || border-color
 
参数：
 
该属性是复合属性。
 
说明：
 
请参阅border属性。
 
示例： 

1 div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; } 

border-right-color        版本：CSS2　 兼容性：IE4+ NS6　继承性：无
 
语法：
 
border-right-color : color
 
参数：
 
color : 　指定颜色。
 
说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width等于0或border-style设置为none，本属性将失去作用。 
 
示例： 

1 div { border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;}

border-right-style     版本：CSS2　 兼容性：IE4+ NS6+　继承性：无
 
语法：
 
border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
 
参数：
 
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边
 
说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width不大于0，本属性将失去作用。
 
示例： 

1 body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; } 

border-right-width     版本：CSS1　 兼容性：IE4+ NS4+　继承性：无

语法：
 
border-right-width : medium | thin | thick | length
 
参数：
 
medium : 　默认宽度
thin : 　小于默认宽度
thick : 　大于默认宽度
length : 　由浮点数字和单位标识符组成的长度值。不可为负值。
 
说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-style设置为none，本属性将失去作用。
 
示例： 

1 span { border-top-width: thin; border-top-style: solid; } 
2 span { border-bottom-width: thin; border-bottom-style: solid; } 
3 span { border-left-width: thin; border-left-style: solid; } 
4 span { border-right-width: thin; border-right-style: solid; } 

border-bottom         版本：CSS1　 兼容性：IE4+ NS6+　继承性：无

语法：
 
border-bottom : border-width || border-style || border-color
 
参数：
 
该属性是复合属性。
 
说明：
 
请参阅border属性。
 
示例： 

1 div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; } 

border-bottom-color     版本：CSS2　 兼容性：IE4+ NS6　继承性：无
 
语法：
 
border-bottom-color : color
 
参数：
 
color : 　指定颜色。请参阅颜色单位和附录：颜色表
 
说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width等于0或border-style设置为none，本属性将失去作用。
 
示例： 

1 div { border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;}

 border-bottom-style       版本：CSS2　 兼容性：IE4+ NS6+　继承性：无

语法：
 
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
 
参数：
 
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边
 
说明： 

要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width不大于0，本属性将失去作用。 
 
示例： 

1 body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; }

border-bottom-width   版本：CSS1　 兼容性：IE4+ NS4+　继承性：无
 
语法：
 
border-bottom-width : medium | thin | thick | length
 
参数：
 
medium : 　默认宽度
thin : 　小于默认宽度
thick : 　大于默认宽度
length : 　由浮点数字和单位标识符组成的长度值。不可为负值。
 
说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-style设置为none，本属性将失去作用。
 
示例： 

1 span { border-top-width: thin; border-top-style: solid; } 
2 span { border-bottom-width: thin; border-bottom-style: solid; } 
3 span { border-left-width: thin; border-left-style: solid; } 
4 span { border-right-width: thin; border-right-style: solid; } 

border-left                 版本：CSS1　 兼容性：IE4+ NS6+　继承性：无

语法：
 
border-left : border-width || border-style || border-color
 
参数：
 
该属性是复合属性。
 
说明：
 
请参阅border属性。
 
示例： 

1 div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; } 

border-left-color       版本：CSS2　 兼容性：IE4+ NS6　继承性：无

语法：
 
border-left-color : color
 
参数：
 
color : 　指定颜色。
 
说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width等于0或border-style设置为none，本属性将失去作用。 
 
示例： 

1 div { border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;} 

border-left-style        版本：CSS2　 兼容性：IE4+ NS6+　继承性：无

语法：
 
border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
 
参数：
 
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边
 
说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-width不大于0，本属性将失去作用。 
 
示例： 

1 body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; } 

border-left-width    版本：CSS1　 兼容性：IE4+ NS4+　继承性：无
 
语法：
 
border-left-width : medium | thin | thick | length
 
参数：
 
medium : 　默认宽度
thin : 　小于默认宽度
thick : 　大于默认宽度
length : 　由浮点数字和单位标识符组成的长度值。不可为负值。
 
说明：
 
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
如果border-style设置为none，本属性将失去作用。
 
示例： 

1 span { border-top-width: thin; border-top-style: solid; } 
2 span { border-bottom-width: thin; border-bottom-style: solid; } 
3 span { border-left-width: thin; border-left-style: solid; } 
4 span { border-right-width: thin; border-right-style: solid; }