種子論壇 | 高雄市資訊培育協會學員討論區

標題: Box Model 設計-邊框(一) [打印本頁]

作者: 陳育霖 時間: 2023-8-12 13:17 標題: 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 外凸線

h1#ex1 { text-align:center; border-style: dotted ;}
h1#ex2 { text-align:center; border-style: dashed ;}
h1#ex3 { text-align:center; border-style: solid ;}
h1#ex4 { text-align:center; border-style: groove ;}
h1#ex5 { text-align:center; border-style: ridge ;}
h1#ex6 { text-align:center; border-style: inset ;}
h1#ex7 { text-align:center; border-style: outset ;}

複製代碼

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

歡迎光臨種子論壇 | 高雄市資訊培育協會學員討論區 (http://seed.istak.org.tw/)