border的進階使用

border屬性可以應用在很多地方，最常被使用在表格和圖片裡。

表格：
<table border="1" style="border-color:pink; border-width:3px;">
<caption>設定表格標題</caption>
     <tr><td>第1列第1欄</td><td>第1列第2欄</td></tr>
     <tr><td>第2列第1欄</td><td>第2列第2欄</td></tr>
</table>

圖片：
<img border="1" src="" style="border-color:pink; border-width:3px;"/>

如果border="0"，則不會有邊框！

如果前面不打border="1"，至少style要打出border-style，才會有邊框！

例如：
<div style="border-style:solid;">
123
</div>

border的屬性介紹

屬性	說明
border-color	border的顏色
border-style	border的樣式
border-width	border的粗細
border-radius	border的圓角

底下用<div></div>這個標記來示範border屬性。

<div style="border-color:#aaaaee; border-style:solid; border-width:3px; border-radius:6px;">
123
</div>

123

上面的語法可以簡化成下面這樣(效果是一樣的)：

<div style="border:#aaaaee solid 3px; border-radius:6px;">
123
</div>

123

可以改變每一邊的框線格式，例如：屬性打上2個值 or 4個值。

<div style="border-color:#aaaaee blue; border-style:solid double; border-width:3px 6px;">
123
</div>

上下 #aaaaee solid 3px
左右 blue double 6px

<div style="border-color:#aaaaee blue pink red; border-style:solid double dashed dotted; border-width:3px 6px 9px 12px;">
123
</div>

上 #aaaaee solid 3px
右 blue double 6px
下 pink dashed 9px
左 red  dotted 12px

如果只有打上3個值，第2個值就會決定左右兩邊的框線，範例如下：

<div style="border-color: #aaaaee blue pink; border-style: solid double dashed; border-width: 3px 6px 9px;">
123
</div>

上 #aaaaee solid 3px
右 blue double 6px
下 pink dashed 9px
左 blue double 6px

如果想明確指定每一邊的框線格式，可以像下面這樣打：

border-屬性
border-top-屬性
border-right-屬性
border-bottom-屬性
border-left-屬性

border-color
border-top-color
border-right-color
border-bottom-color
border-left-color

border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

border-width
border-top-width
border-right-width
border-bottom-width
border-left-width

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

PS：指定的程式碼，放的位置很重要！

例如：
<div style="border:#aaaaee solid 3px; border-top-color:green;">
一定要放在後面，這樣才會成功！
</div>

<div style="border-top-color:green; border:#aaaaee solid 3px;">
如果是放在前面，這樣就會失敗...
<br>
因為會被後面的程式碼覆蓋過去...
</div>

border-style的樣式有10種：

<div style="border-style:dotted;">
A dotted border.
</div>

<div style="border-style:dashed;">
A dashed border.
</div>

<div style="border-style:solid;">
A solid border.
</div>

<div style="border-style:double;">
A double border.
</div>

<div style="border-style:groove;">
A groove border.
</div>

<div style="border-style:ridge;">
A ridge border.
</div>

<div style="border-style:inset;">
An inset border.
</div>

<div style="border-style:outset;">
An outset border.
</div>

<div style="border-style:none;">
A none border.
</div>

<div style="border-style:hidden;">
A hidden border.
</div>

PS：有些樣式，有些瀏覽器無法呈現出來！

---

剛好講到border屬性，就用它來說明<span>和<div>標記有什麼不同？

請仔細看底下這兩串文字的內容！

<span style="border:pink solid 3px">123</span>

<div style="border:pink solid 3px">123</div>

執行結果如下：

123

123

看出差異了嗎？

<span>用在小範圍，會受內容物影響！

例如：
<span style="border:pink solid 3px;">123<br><br>456</span>

執行結果如下：

123

456

會因為斷行，而造成邊框斷裂...

<div>用在大範圍，不受內容物影響。

如果想自己決定<div>的寬度和長度，可以照底下這樣打：

<div style="border:#aaaaee solid 3px; width:100px; height:100px;">123</div>

123

類似border效果的box-shadow，用法如下：

<div style="box-shadow:6px 6px 24px pink; line-height:100px; text-align:center; width:200px;">
box-shadow 陰影效果
</div>

box-shadow 陰影效果

PS：有些瀏覽器無法呈現出來！

border的教學就到此結束，謝謝大家的觀看。 ^^