CSS 用來設計網頁元素的邊框超級好用，無論是圖片的邊框、文字的邊框還是文字輸入欄位的邊框都很簡單，而且都是用同樣的概念，在 CSS 中有一個叫做 border 的屬性，可以替網頁元素增加邊框效果，而且還可以設定樣式、粗細、顏色 ... 等特效，你也想玩玩看嗎？真的很實用，這裡寫個簡單的範例給各位瞧瞧 ^^
CSS border 邊框設計範例開始
關於 CSS 的 border 邊框設計可以參考 WebTech 網頁上的這篇《CSS border 邊框設計》教學，自己嘗試用範例去做一點小小的變化，你也可以設計出很棒的網頁元素邊框效果，我們這篇範例也是從 WebTech 網頁上的例子修改來的。
CSS border 邊框設計範例開始
<div style="border:2px red dashed;padding:20px;">
這裡是隨便寫的內容
</div>
程式碼的結果像這樣這裡是隨便寫的內容
</div>
這裡是隨便寫的內容
看到一個虛線邊框的效果了吧？！我們利用 CSS 的 border 邊框屬性將 DIV 區塊增加了外圍的紅色虛線邊框，而且粗細是 2px，有點粗又不會太粗，應該很清楚吧！關於 CSS 的 border 邊框設計可以參考 WebTech 網頁上的這篇《CSS border 邊框設計》教學，自己嘗試用範例去做一點小小的變化，你也可以設計出很棒的網頁元素邊框效果，我們這篇範例也是從 WebTech 網頁上的例子修改來的。