如何使用CSS14边框属性.docx
- 文档编号:10961164
- 上传时间:2023-02-24
- 格式:DOCX
- 页数:18
- 大小:17.48KB
如何使用CSS14边框属性.docx
《如何使用CSS14边框属性.docx》由会员分享,可在线阅读,更多相关《如何使用CSS14边框属性.docx(18页珍藏版)》请在冰豆网上搜索。
如何使用CSS14边框属性
边框属性(BordersProperties)
borderborder-colorborder-styleborder-width
border-topborder-top-colorborder-top-styleborder-top-width
border-rightborder-right-colorborder-right-styleborder-right-width
border-bottomborder-bottom-colorborder-bottom-styleborder-bottom-width
border-leftborder-left-colorborder-left-styleborder-left-width
border
说明:
设置对象的边框样式。
当你指定了边框颜色(border-color)和边框宽度(border-width)时,你必须同时指定边框样式(border-style),否则边框不会被呈现。
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如:
设置border:
thin等于设置border:
thinnone,而border-color的默认值将采用文本颜色。
因此此前的任何border-color和border-width设置都会被清除。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
对应的脚本特性为border。
语法:
border:
border-width||border-style||border-color
取值:
该属性是复合属性。
请参阅各参数对应的属性。
默认值为:
mediumnone。
border-color的默认值将采用文本颜色。
示例:
p{border:
thickdoubleyellow;}
blockquote{border:
dottedgray;}
p{border:
25px;}
border-style
说明:
设置对象边框的样式。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
对应的脚本特性为borderStyle。
语法:
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的值画3D凸槽
inset:
根据border-color的值画3D凹边
outset:
根据border-color的值画3D凸边
示例:
body{border-style:
doublegroove;}
body{border-style:
doublegroovedashed;}
border-width
说明:
设置对象边框的宽度。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
如果border-style设置为none,本属性将失去作用。
对应的脚本特性为borderWidth。
语法:
border-width:
medium|thin|thick|length
取值:
medium:
默认值。
默认宽度
thin:
小于默认宽度
thick:
大于默认宽度
length:
由浮点数字和单位标识符组成的长度值。
不可为负值。
请参阅长度单位
示例:
div{border-style:
solid;border-width:
thin;}
span{display:
block;border-style:
solid;border-width:
1pxthin;}
p{border-color:
#000000;border-width:
1px1px2px3px;}
border-top
说明:
设置对象上边框的样式。
当你指定了边框颜色(border-top-color)和边框宽度(border-top-width)时,你必须同时指定边框样式(border-top-style),否则边框不会被呈现。
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如:
设置border-top:
thin等于设置border-top:
thinnone,而border-top-color的默认值将采用文本颜色。
因此此前的任何border-top-color和border-top-width设置都会被清除。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
对应的脚本特性为borderTop。
语法:
border-top:
border-width||border-style||border-color
取值:
该属性是复合属性。
请参阅各参数对应的属性。
默认值为:
mediumnone。
border-color的默认值将采用文本颜色。
示例:
div{border-bottom:
25pxsolidred;border-left:
25pxsolidyellow;border-right:
25pxsolidblue;border-top:
25pxsolidgreen;}
border-top-color
说明:
设置对象上边框的颜色。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
如果border-top-style设置为none或border-top-width设置为0,本属性将失去作用。
对应的脚本特性为borderTopColor。
语法:
border-top-color:
color
取值:
color:
指定颜色。
请参阅颜色单位和附录:
颜色表
示例:
div{border-top-color:
red;border-bottom-color:
RGB(223,94,77);border-right-color:
red;border-left-color:
black;}
border-top-color
说明:
设置对象上边框的颜色。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
如果border-top-style设置为none或border-top-width设置为0,本属性将失去作用。
对应的脚本特性为borderTopColor。
语法:
border-top-color:
color
取值:
color:
指定颜色。
请参阅颜色单位和附录:
颜色表
示例:
div{border-top-color:
red;border-bottom-color:
RGB(223,94,77);border-right-color:
red;border-left-color:
black;}
border-top-width
说明:
设置对象上边框的宽度。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
对应的脚本特性为borderTopWidth。
语法:
border-top-width:
medium|thin|thick|length
取值:
medium:
默认值。
默认宽度
thin:
小于默认宽度
thick:
大于默认宽度
length:
由浮点数字和单位标识符组成的长度值。
不可为负值。
请参阅长度单位
示例:
span{border-top-width:
thin;border-top-style:
solid;}
span{border-bottom-width:
thin;border-bottom-style:
solid;}
span{border-left-width:
thin;border-left-style:
solid;}
span{border-right-width:
thin;border-right-style:
solid;}
border-right
说明:
设置对象右边框的样式。
当你指定了边框颜色(border-right-color)和边框宽度(border-right-width)时,你必须同时指定边框样式(border-right-style),否则边框不会被呈现。
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如:
设置border-right:
thin等于设置border-right:
thinnone,而border-right-color的默认值将采用文本颜色。
因此此前的任何border-right-color和border-right-width设置都会被清除。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
对应的脚本特性为borderRight。
语法:
border-right:
border-width||border-style||border-color
取值:
该属性是复合属性。
请参阅各参数对应的属性。
默认值为:
mediumnone。
border-color的默认值将采用文本颜色。
示例:
div{border-bottom:
25pxsolidred;border-left:
25pxsolidyellow;border-right:
25pxsolidblue;border-top:
25pxsolidgreen;}
border-right
说明:
设置对象右边框的样式。
当你指定了边框颜色(border-right-color)和边框宽度(border-right-width)时,你必须同时指定边框样式(border-right-style),否则边框不会被呈现。
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如:
设置border-right:
thin等于设置border-right:
thinnone,而border-right-color的默认值将采用文本颜色。
因此此前的任何border-right-color和border-right-width设置都会被清除。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
对应的脚本特性为borderRight。
语法:
border-right:
border-width||border-style||border-color
取值:
该属性是复合属性。
请参阅各参数对应的属性。
默认值为:
mediumnone。
border-color的默认值将采用文本颜色。
示例:
div{border-bottom:
25pxsolidred;border-left:
25pxsolidyellow;border-right:
25pxsolidblue;border-top:
25pxsolidgreen;}
border-right-style
说明:
设置对象右边框的样式。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
如果border-right-width设置为0,本属性将失去作用。
对应的脚本特性为borderRightStyle。
语法:
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凸边
示例:
body{border-top-style:
double;border-bottom-style:
groove;border-left-style:
dashed;border-right-style:
dotted;}
border-right-width
说明:
设置对象右边框的宽度。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
对应的脚本特性为borderRightWidth。
语法:
border-right-width:
medium|thin|thick|length
取值:
medium:
默认值。
默认宽度
thin:
小于默认宽度
thick:
大于默认宽度
length:
由浮点数字和单位标识符组成的长度值。
不可为负值。
请参阅长度单位
示例:
span{border-top-width:
thin;border-top-style:
solid;}
span{border-bottom-width:
thin;border-bottom-style:
solid;}
span{border-left-width:
thin;border-left-style:
solid;}
span{border-right-width:
thin;border-right-style:
solid;}
border-bottom
说明:
设置对象下边框的样式。
当你指定了边框颜色(border-bottom-color)和边框宽度(border-bottom-width)时,你必须同时指定边框样式(border-bottom-style),否则边框不会被呈现。
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如:
设置border-bottom:
thin等于设置border-bottom:
thinnone,而border-bottom-color的默认值将采用文本颜色。
因此此前的任何border-bottom-color和border-bottom-width设置都会被清除。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
对应的脚本特性为borderBottom。
语法:
border-bottom:
border-width||border-style||border-color
取值:
该属性是复合属性。
请参阅各参数对应的属性。
默认值为:
mediumnone。
border-color的默认值将采用文本颜色。
示例:
div{border-bottom:
25pxsolidred;border-left:
25pxsolidyellow;border-right:
25pxsolidblue;border-top:
25pxsolidgreen;}
border-bottom-color
说明:
设置对象下边框的颜色。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
如果border-bottom-style设置为none或border-bottom-width设置为0,本属性将失去作用。
对应的脚本特性为borderBottomColor。
语法:
border-bottom-color:
color
取值:
color:
指定颜色。
请参阅颜色单位和附录:
颜色表
示例:
div{border-top-color:
red;border-bottom-color:
RGB(223,94,77);border-right-color:
red;border-left-color:
black;}
border-bottom-style
说明:
设置对象下边框的样式。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
在IE5.5+中,边框属性可以直接应用于内联要素。
而在此前的版本中,内联要素要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
如果border-bottom-width设置为0,本属性将失去作用。
对应的脚本特性为borderBottomStyle。
语法:
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:
在MA
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 使用 CSS14 边框 属性