W3.CSSボーダー
国境があります。
左の境界線しかありません。
上下に緑色の境界線があります。
青い境界線があります。
ホバーすると緑色に変わる赤い境界線。
W3.CSSボーダークラス
W3.CSSは、次の境界クラスを提供します。
| クラス | 定義 |
|---|---|
| w3-ボーダー | 要素に境界線（上、右、下、左）を追加します |
| w3-ボーダートップ | 要素に上枠を追加します |
| w3-border-right | 要素に右の境界線を追加します |
| w3-border-bottom | 要素に下の境界線を追加します |
| w3-border-left | 要素に左の境界線を追加します |
| w3-border-0 | すべての境界線を削除します |
| w3-ボーダーカラー | 指定した色（赤、青など）で境界線を表示します |
| w3-ホバーボーダーカラー | ホバー可能な境界線の色を追加します |
| w3-ボトムバー | 要素に太い下の境界線を追加します |
| w3-左棒 | 要素に太い左境界線を追加します |
| w3-右棒 | 要素に太い右境界線を追加します |
| w3-トップバー | 要素に太い上枠を追加します |
境界線の追加
w3-borderクラスは、任意のHTML要素に境界線を追加するために使用されます。
国境があります。
左の境界線しかありません。
上と下の境界線があります。
例
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>
<div class="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>
ボーダーカラー
w3-border -colorクラスは、境界線に色を追加するために使用されます。
赤い境界線があります。
青い左の境界線があります。
上下に緑色の境界線があります。
左の境界線が赤で、背景色が淡い赤です。
例
<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>I have a blue left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>I have a green top and bottom border.</p>
</div>
丸みを帯びた境界線
丸みを帯びた境界線を追加するには、w3-round- sizeクラスの1つを追加します。
私は通常の境界線を持っています。
私は小さな丸い境界線を持っています。
ボーダーを丸めました。
私は大きな丸い境界線を持っています。
私はxlargeの丸い境界線を持っています。
私はxxlargeの丸い境界線を持っています。
例
<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>My borders are rounded (small).</p>
</div>
<div class="w3-panel
w3-border w3-round">
<p>My borders are rounded.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>I have
large rounded borders.</p>
</div>
<div class="w3-panel w3-border
w3-round-xlarge">
<p>I have xlarge rounded borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>I have
xxlarge rounded borders.</p>
</div>
太いボーダー
w3-topbar、w3 -bottombar 、w3-leftbar、 およびw3-rightbarクラスは、要素に太い境界線を追加するために使用されます。
例
<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>I have a thick blue left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>I have a thick blue left border and a pale-blue background color.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>
ホバー可能なボーダー
w3-hover-border- colorクラスは、マウスオーバー時に境界線の色を変更します。
ホバーすると赤くなる境界線。
ホバーすると緑色に変わる赤い境界線。
例
<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>Red border that turns green on hover</p>
</div>
例
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>Thick (invisible) bottom border that turns green on hover.</p>
</div>
ホバーすると緑色に変わる太い白（見えない）の境界線。
ホバーすると黒に変わる太い白（見えない）の境界線。
例
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>Thick (invisible) border that turns green on hover.</p>
</div>
<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>Thick (invisible) border that turns black on hover.</p>
</div>