当前位置导航:炫浪网>>网络学院>>网页制作>>HTML与CSS教程

CSS边框的设定方法

    在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给我……

相关内容
赞助商链接