Box Model 設計-邊框(一)

陳育霖

邊框 Border 設計
border-top-style 上框線、border-right-style 右框線、border-bottom-style 下框線、border-left-style 左框線
border-style 邊框樣式、border-color 邊框顏色、border-width 邊寬寬度、border-radius 邊框圓角、border-image圖樣邊框
dotted 點框線、dashed 虛框線、solid 實框線、groove 3D內凸線、ridge 3D外凸線、inset 內凹線、outset 外凸線

1. h1#ex1 { text-align:center; border-style: dotted ;}
   
2. h1#ex2 { text-align:center; border-style: dashed ;}
   
3. h1#ex3 { text-align:center; border-style: solid ;}
   
4. h1#ex4 { text-align:center; border-style: groove ;}
   
5. h1#ex5 { text-align:center; border-style: ridge ;}
   
6. h1#ex6 { text-align:center; border-style: inset ;}
   
7. h1#ex7 { text-align:center; border-style: outset ;}

複製代碼

邊框顏色 border-color
邊框寬度 border-width
thin 細寬線、medium 預設，中等框線、thick 粗框線、length 長度
四個值：上、右、下、左
三個值：上、左右、下
兩個值：上下、左右
一個值：上下左右