CSS DIV 邊框顏色與邊框樣式設計

DIV 區塊的邊框預設是沒有顏色的，當然也不會樣式可以看，如果我們希望替 DIV 區塊增加邊框的顏色以及樣式有什麼好方法呢？答案是可以使用 css 內建的元素邊框屬性來設計，常用的設計方式有單一個 border 或者是利用 border-color, border-style, border-width 分別為 DIV 區塊邊框的顏色與樣式做出設定，我們會在範例中分別將這兩種寫法呈現給各位讀者能看。

用 CSS 替 DIV 邊框顏色與邊框樣式設計範例
<style>
#DIV1{
border:2px blue dashed;
margin-bottom:15px;
}
#DIV2{
border-width:2px;
border-color:orange;
border-style:dashed;
}
</style>
<div id="DIV1">這是藍色虛線邊框的 DIV 區塊</div>
<div id="DIV2">這是橘色虛線邊框的 DIV 區塊</div>
範例呈現的結果
這是藍色虛線邊框的 DIV 區塊
這是橘色虛線邊框的 DIV 區塊
我們總共準備了兩個 DIV 區塊，分別用 border 屬性以及 border-color, border-style, border-width 來設計其邊框顏色與樣式，效果是不是相當顯著呢？關於這幾個屬性的詳細用法，可參閱我們的內容。
這幾個都是 CSS 的基本屬性，除了可以應用在 DIV 區塊內，還可以套用至其他的網頁元素，例如 span 區域、圖片、textarea、input type= text ... 等，應用範圍相當的多。

延伸閱讀
© Copyright webtech.tw Since 2010