土芭樂數位學堂

BigData 大數據分析、資訊技術的分享, TiddlyWiki教學, Google 服務應用教學, 3D列印創意思維

6月 11, 2009

HTML 網頁框線樣式設計

利用CSS,在 HTML裡的框線(border)可以更多樣化,土芭樂特別將各式各樣的框線樣式做總整理:

以下是上述各種框線的 CSS 語法:

p.none {border-style:none} //範例一、無框線
p.dotted {border-style:dotted} //範例二、虛點框--Dreamweaver稱「點狀線」
p.dashed {border-style:dashed} //範例三、虛線框
p.solid {border-style:solid} //範例四、實框
p.double {border-style:double} //範例五、雙框--Dreamweaver稱「雙畫線」
p.groove {border-style:groove} //範例六、立體凹框--Dreamweaver稱「溝道狀」
p.ridge {border-style:ridge} //範例七、立體凸框--Dreamweaver稱「山脊狀」
p.inset {border-style:inset} //範例八、下框線淺色樣式--Dreamweaver稱「凹陷狀」
p.outset {border-style:outset} //範例九、上框線淺色樣式--Dreamweaver稱「凸陷狀」
p.hidden {border-style:hidden} //範例十、隱藏框線

, , , ,

沒有留言:

張貼留言