OECSPACE - Css style 教學「框線屬性一覽」
CSS串聯樣式表教學『框線屬性一覽』
- 邊框顏色
- border-top-color : #369; /*上框線色彩*/
- border-right-color : #369; /*右框線色彩*/
- border-bottom-color : #369; /*下框線色彩*/
- border-left-color : #369; /*左框線色彩*/
- border-color : #369; /*簡化 四邊框線色彩*/
- 邊框寬度
- border-top-width :1px; /*上框線寬度*/
- border-right-width :1px; /*右框線寬度*/
- border-bottom-width :1px; /*下框線寬度*/
- border-left-width :1px; /*左框線寬度*/
- border-width :1px; /*簡化 四邊框線寬度*/
- 邊框樣式
- border-top-style : solid; /*上框線樣式*/
- border-right-style : solid; /*右框線樣式*/
- border-bottom-style : solid; /*下框線樣式*/
- border-left-style : solid; /*左框線樣式*/
- border-style : solid; /*簡化 四邊框線樣式*/
綜合以上樣式以下是建議書寫方式 :- border-top : 1px solid #6699cc; /*上框線*/
- border-bottom : 1px solid #6699cc; /*下框線*/
- border-left : 1px solid #6699cc; /*左框線*/
- border-right : 1px solid #6699cc; /*右框線*/
solid /*實線框*/ │ dotted /*虛線框*/ │
double /*雙線框*/ │ groove /*立體內凸框*/
ridge /*立體浮凸框*/ │
inset /*凹框*/ │ outset /*凸框*/
框線樣式簡寫解說:
簡寫的順序為：border-width | border-style | border-color
例如 :
border-top : 1px solid #69c; /*上框線*/
border-right : 1px solid #69c; /*右框線*/
border-bottom : 1px solid #69c; /*下框線*/
border-left : 1px solid #69c; /*左框線*/
簡寫寫法 :
border: 1px solid #69c;
因為值都相同所以更簡化
其他簡寫方法 :
border: 2px; /*四邊界一起宣告相同值*/
border: 2pt 3pt 2pt 3pt; /*宣告四邊不同值順序為上、右、下、左*/
border: 2pt 3pt; /*上下或左右值相同時順序為上下、右左*/
邊框樣式範例運用