有了最基本的畫面之後
發現只有個底色很單調
所以這次要來整理一下邊框【border】。


邊框的樣式有以下８種 ↓

dotted, dashed, solid, double, groove, ridge, inset, outset

double雙線至少要設定3px的寬度纔看得見效果(兩條線和中間的留白呀~)
後四種要用黑色以外的顏色才會有層次的效果


border邊框寫法 ↓
樣式－ border-style:solid;
寬度－ border-width:3px;
顏色－ border-color:#000000;

麻煩啦，寫成一行就好啦 ↓ ^.<
border:solid 3px #000000;


以下為建立border的範例(為最後所附網頁上的第一個例子)
已將div內的style整理出來了←整理請見語法整理篇 ↓

<style>
.border_dotted {
　position:absolute; background-color:#FFFF7D;/*位置、底色*/
　width:90px; height:40px;/*寬度、高度*/
　border:dotted 3px #000000;/*邊框樣式、寬度、顏色*/
　top:20px; left:50px;　/*和頂點的距離、和左邊的距離*/
}
</style>

<div class="border_dotted">點線 dotted</div>


若想要在同一個div上不同邊緣有不同的border效果
可以在語法內加以利用上(top)、下(bottom)、左(left)、右(right)四個方向來設定 ↓
border-top-style:solid;
border-bottom-width:3px;
之類等等

當然這樣寫也是太麻煩，和前面一樣縮成一行即可 ↓

<style>
.border_mix {
　position:absolute; background-color:#FFFF7D;/*位置、底色*/
　width:90px; height:40px;/*寬度、高度*/
　border-top:solid 5px #000000;/*上邊框樣式、寬度、顏色*/
　border-bottom:double 5px #000000;/*下邊框樣式、寬度、顏色*/
　border-left:groove 5px #CCCCCC;/*左邊框樣式、寬度、顏色*/
　border-right:outset 5px #CCCCCC;/*右邊框樣式、寬度、顏色*/
　top:500px; left:50px;
}
</style>

<div class="border_mix">混搭</div>

範例連結：輕鬆的在div上加好border囉！