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給我...

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.