学院首页>网页制作>CSS>CSS边框的设定方法

CSS边框的设定方法

作者:feichih 来源:未知 添加时间:2006-5-21 9:49:30
在HTML中对于边框的设定,在文字方面好象没有较详细的设定.. 
至于图形方面,<img>卷标提供了hspace,vspace,border等项目来设定边框... 
CSS对边框的延伸规格有较详细的设定... 
不管是文字或者图形都可使用边框来显示... 
以图形为列,一张在网页上显示的图形.. 
边框的性质有3个,就像一张图档周围还有3个框.... 
由内至外分别是padding,border-width,margin... 
这3个框右分别有上、下、左、右,四个性质可设定它的大小... 
共12种性质如下: 
padding 
padding-top:2px 
padding-right 
padding-bottom 
padding-left 

border-width 
border-top-width 
border-right-width 
border-botton-width 
border-left-width 

margin 
margin-top 
margin-right 
margin-botton 
margin-left 

可以针对一个性质作设定也可以同时,如: 
padding:2px,1px,2px,1px 依序是 上、右、下、左 
或者单一,如 padding-top:2px 

至于边框的形式与颜色,可以针对形式border-style来设定... 
一样有上、右、下、左,四个性质: 

border-top-style 
border-right-style 
border-botton-style 
border-left-style 

性质的内容可设定为: 
solid:实线 
double:双直线 
groove:3D凹线 
ridge:3D凸线 
inset:3D崁入线 
outset:3D隆起线 

边框颜色border-color的设定: 
一样有上、右、下、左,四个性质: 

border-top-color 
border-right-color 
border-botton-color 
border-left-color 

颜色设定跟字体的设定一样..... 
................................ 
关于以上的设定,如果其中一个性值的设定,如: 

border-style:solid,double 

我只设定的上、右的边框,则缺少的边框会自动已相对的边框来设并.. 
所以结果会相当于: 

border-style:solid,double,solid,double 
........................................... 
在实际运用上,举个例: 

<html> 
<head> 
<meta content="text/html; charset=big5" http-equiv=Content-Type> 
<title></title> 
</head> 
<body> 
<table style="border-width:10;border-style:double;border-color:red"> 
<tr><td>红色双直线边框</td></tr> 
</table> 
<div style="border-width:10;border-style:ridge;border-color:green"> 
绿色3D凸线边框 
</div> 
</body> 
</html> 



对于CSS 边框设定大概就是这样... 
这些范例在我的网页都有....有兴趣可以看看... 
如果以上的内容有误或着有问题的话.. 
欢迎你mail给我...
站内搜索