CSS邊框的設定方法
來源:互聯網
上載者:User
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給我...