返回列表 發帖

Box Model 設計-邊框(一)

本帖最後由 陳育霖 於 2023-8-29 01:23 編輯

邊框 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 長度
四個值:上、右、下、左
三個值:上、左右、下
兩個值:上下、左右
一個值:上下左右

返回列表