W3.CSS 邊框
我有關邊框。
我只有左邊框。
我有綠色的頂部和底部邊框。
我有藍色的邊框。
紅色的邊框，懸停時變為綠色。
W3.CSS 邊框類
W3.CSS 提供以下邊框類
| 類 | 定義 |
|---|---|
| w3-border | 為元素新增邊框（頂部、右側、底部、左側） |
| w3-border-top | 為元素新增頂部邊框 |
| w3-border-right | 為元素新增右側邊框 |
| w3-border-bottom | 為元素新增底部邊框 |
| w3-border-left | 為元素新增左側邊框 |
| w3-border-0 | 移除所有邊框 |
| w3-border-顏色 | 以指定顏色（如紅色、藍色等）顯示邊框 |
| w3-hover-border-顏色 | 新增可懸停的邊框顏色 |
| w3-bottombar | 為元素新增粗的底部邊框 |
| w3-leftbar | 為元素新增粗的左側邊框 |
| w3-rightbar | 為元素新增粗的右側邊框 |
| w3-topbar | 為元素新增粗的頂部邊框 |
新增邊框
w3-border 類用於為任何 HTML 元素新增邊框
我有關邊框。
我只有左邊框。
我有頂部和底部邊框。
示例
<div class="w3-panel w3-border">
<p>我有關邊框。</p>
</div>
<div class="w3-panel w3-border-left">
<p>我只有左邊框。</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>我有頂部和底部邊框。</p>
</div>
自己試試 »
邊框顏色
w3-border-color 類用於為邊框新增顏色
我有紅色的邊框。
我有一個藍色的左邊框。
我有綠色的頂部和底部邊框。
我有一個紅色的左邊框和淡紅色背景色。
示例
<div class="w3-panel w3-border w3-border-red">
<p>我有紅色的邊框。</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>我有一個藍色的左邊框。</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>我有綠色的頂部和底部邊框。</p>
</div>
自己試試 »
圓角邊框
要新增圓角邊框，請新增 w3-round-size 類之一
我的邊框是正常的。
我的邊框是小的圓角。
我的邊框是圓角。
我的邊框是大的圓角。
我的邊框是超大圓角。
我的邊框是巨大圓角。
示例
<div class="w3-panel w3-border">
<p>我的邊框是正常的。</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>我的邊框是圓角（小）。</p>
</div>
<div class="w3-panel w3-border w3-round">
<p>我的邊框是圓角。</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>我有一個大的圓角邊框。</p>
</div>
<div class="w3-panel w3-border w3-round-xlarge">
<p>我有一個超大的圓角邊框。</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>我有一個巨大的圓角邊框。</p>
</div>
粗邊框
w3-topbar、w3-bottombar、w3-leftbar 和 w3-rightbar 類用於為元素新增粗邊框
示例
<div class="w3-panel w3-leftbar">
<p>我有一個粗的左邊框。</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>我有一個粗的藍色左邊框。</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>我有一個粗的藍色左邊框和淡藍色背景色。</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>我有一個粗的紅色頂部和底部邊框，以及一個淡紅色的背景色。</p>
</div>
可懸停的邊框
w3-hover-border-color 類會在滑鼠懸停時更改邊框的顏色
邊框在懸停時變為紅色。
紅色的邊框，懸停時變為綠色。
示例
<div class="w3-panel w3-border w3-hover-border-red">
<p>邊框在懸停時變為紅色</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>紅色的邊框在懸停時變為綠色</p>
</div>
自己試試 »
示例
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>粗（不可見）的左邊框在懸停時變為綠色。</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>粗（不可見）的底部邊框在懸停時變為綠色。</p>
</div>
粗的白色（不可見）邊框在懸停時變為綠色。
粗的白色（不可見）邊框在懸停時變為黑色。
示例
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>粗（不可見）的邊框在懸停時變為綠色。</p>
</div>
<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>粗（不可見）的邊框在懸停時變為黑色。</p>
</div>
