有了最基本的畫面之後
發現只有個底色很單調
所以這次要來整理一下邊框
【border】。
邊框的樣式有以下８種 ↓
dotted, dashed, solid, double, groove, ridge, inset, outsetdouble雙線至少要設定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囉！
