如何替 HTML DIV 區塊增加邊框效果

HTML DIV 區塊除了可以當容器使用或用來做網頁排版之外,本身也可以透過增加邊框效果來美化視覺效果,在這裡我們要用到的是 CSS 的邊框設計技巧,也就是 border 屬性,透過 border 屬性可以很輕易的替 HTML 的 DIV 區塊增加四個邊框,甚至分別替上邊框、右邊框、下邊框或左邊框設計不同的風格效果都可以輕鬆做到,先來看看 border 屬性的基本語法再套用到範例看效果。

CSS border 邊框屬性基本語法

border: 邊框寬度 邊框顏色 邊框樣式;

基本的 border 屬性可以透過邊框的寬度、顏色以及樣式來設計不同的視覺效果,這幾個參數的設計範例請參閱以下內容

如果你對以上的 borde 屬性非常了解,可以直接看範例的套用效果

替 HTML DIV 區塊增加邊框效果範例

<div style="border:2px red solid;">紅色的實線邊框</div>
<div style="border:2px blue dashed;">藍色的虛線邊框</div>
<div style="border:4px orange solid;">橘色的粗實線邊框</div>

範例的呈現效果

紅色的實線邊框
藍色的虛線邊框
橘色的粗實線邊框

從範例的三個不同邊框樣式可以看到,透過 CSS border 屬性可以很輕易的替 HTML DIV 區塊設計出不同風格的邊框效果,無論是顏色、粗細還是邊框要實現或虛線都可以很輕易的做出來,各位自己嘗試看看。

延伸閱讀

© Copyright webtech.tw Since 2010