圖解 CSS (2): border – 邊框

來源:互聯網
上載者:User
樣式表可以是外部的、內聯的、嵌入的、連結的, 譬如下面的內聯樣式將作用於所有 ID=Test 的標籤:
<style> #Test {...} </style>
borderborder-widthborder-styleborder-colorborder-topborder-top-widthborder-top-styleborder-top-colorborder-bottomborder-bottom-widthborder-bottom-styleborder-bottom-colorborder-leftborder-left-widthborder-left-styleborder-left-colorborder-rightborder-right-widthborder-right-styleborder-right-colorborder-collapseborder-spacing

border: 寬度 樣式 顏色;


border 的寬度有三個常數值: medium(預設)、thick(粗)、thin(細).




自訂寬度最麻煩的就是寬度的單位(in、cm、mm、em、ex、pt、pc、px), 我喜歡用像素(px).


border 的樣式: none(預設)、solid、double、dotted、dashed、groove、ridge、inset、outset.










後四種 3D 樣式, 如果使用預設的 3D 著色顏色效果會更好:





指定顏色有五種方法(譬如藍色): RGB(0,0,255); #0000FF; #00F; Blue; RGB(0,0,100%).






border: 寬度 樣式 顏色; 可以從後向前省略, 也可以用 border-width、border-style、border-color 分開表達.


可以用 border-top、border-bottom、border-left、border-right 分別描述四個邊;
並可用 border-top-width、border-top-style、border-top-color 等描述各邊的: 寬度、樣式、顏色.


上面列出的邊框相關的樣式還有: border-collapse、border-spacing; 這是表格相關的.

border-collapse 有兩個常數值: collapse、separate, 決定邊框是否分開:



border-spacing: 用來設定表格中儲存格的間距; 這個好像 IE(8) 不支援, 不過這和表格的 cellspacing 屬性是一樣的.

相關文章

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.