鐵人

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; /*上下或左右值相同時順序為上下、右左*/

<div style="border:1px dashed #09f">這是一個綠色虛線框的區塊<div>