表格：
<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-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
左右 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
右 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
下 pink dashed 9px
如果想明確指定每一邊的框線格式，可以像下面這樣打：
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>
A dotted border.
</div>
<div style="border-style:dashed;">
A dashed border.
</div>
A dashed border.
</div>
<div style="border-style:solid;">
A solid border.
</div>
A solid border.
</div>
<div style="border-style:double;">
A double border.
</div>
A double border.
</div>
<div style="border-style:groove;">
A groove border.
</div>
A groove border.
</div>
<div style="border-style:ridge;">
A ridge border.
</div>
A ridge border.
</div>
<div style="border-style:inset;">
An inset border.
</div>
An inset border.
</div>
<div style="border-style:outset;">
An outset border.
</div>
An outset border.
</div>
<div style="border-style:none;">
A none border.
</div>
A none 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的教學就到此結束，謝謝大家的觀看。 ^^
沒有留言:
張貼留言