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

border                        版本:CSS1  兼容性:IE4+ NS4+ 继承性:无
 
语法:
 
border : border-width || border-style || border-color
 
参数:

 
该属性是复合属性。
 
说明:
 
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为:medium none。border-color的默认值将采用文本颜色。
要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。  
 
示例: 

1  {  border :  thick double yellow ;   }  
2  blockquote  {  border :  dotted gray ;   }  
3  {  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 ;   }

 

 

你可能感兴趣的:(css)