CSS 邊框(Border) | css border取消
border-style屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值,以及每一個值顯現出來的結果。border-width屬性是用來設定邊框的寬度。可用的值為thin(薄)、medium(中等)、thick(厚),或是一個數字。CSS樣式顯現結果p{border-width:9px;border-style:solid;}邊框寬度為9pxp{border-width:medium;border-style:dashed;}邊框寬度為中等CSS樣式顯現結果p{border-color:#0000FF;border-style:solid;}藍色邊框p{border-color:red;border-style:dotted;}紅色邊框我們可以將方向(top-上、bottom-下、left-左、right-右)和樣式、寬度、...
border-style 屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值,以及每一個值顯現出來的結果。
border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚),或是一個數字。
CSS 樣式顯現結果p {border-width:9px; border-style:solid;}
邊框寬度為 9px
p {border-width:medium; border-style:dashed;}
邊框寬度為中等
CSS 樣式顯現結果p {border-color:#0000FF; border-style:solid;}
藍色邊框
p {border-color:red; border-style:dotted;}
紅色邊框
我們可以將方向 (top - 上、bottom - 下、left - 左、right - 右) 和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說, border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子:
CSS 樣式顯現結果p {border-top-style:solid; border-bottom-style:dotted;}
例1:上邊框為實線,下邊框為點線
p {border-top-style:solid; border-top-width:medium;}
例 2:上邊框為實線,且寬度中等
p {border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;}
例3:左邊框為實線,下邊框為虛線,且顏色為綠色
若四邊的邊框屬性都一樣,那我們可以用一個 border 屬性來描述,而不必四個邊都描述一次。另外,我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。
p { border:#0000FF 5px solid; }
<p>...