เส้นขอบ W3.CSS
ฉันมีพรมแดน
ฉันมีเพียงขอบด้านซ้าย
ฉันมีขอบบนและล่างสีเขียว
ฉันมีขอบสีน้ำเงิน
เส้นขอบสีแดงที่เปลี่ยนเป็นสีเขียวเมื่อโฮเวอร์
คลาสชายแดน W3.CSS
W3.CSS มีคลาสเส้นขอบต่อไปนี้:
| ระดับ | กำหนด |
|---|---|
| w3-border | เพิ่มเส้นขอบ (บน, ขวา, ล่าง, ซ้าย) ให้กับองค์ประกอบ |
| w3-เส้นขอบด้านบน | เพิ่มเส้นขอบบนองค์ประกอบ |
| w3-เส้นขอบขวา | เพิ่มเส้นขอบด้านขวาให้กับองค์ประกอบ |
| w3-ขอบล่าง | เพิ่มเส้นขอบด้านล่างให้กับองค์ประกอบ |
| w3-border-left | เพิ่มเส้นขอบด้านซ้ายให้กับองค์ประกอบ |
| w3-border-0 | ลบขอบทั้งหมด |
| w3-border- สี | แสดงเส้นขอบด้วยสีที่กำหนด (เช่น แดง น้ำเงิน ฯลฯ) |
| w3-โฮเวอร์- เส้นขอบ- สี | เพิ่มสีเส้นขอบที่เลื่อนได้ |
| w3-แถบล่าง | เพิ่มเส้นขอบด้านล่างหนาให้กับองค์ประกอบ |
| w3-leftbar | เพิ่มเส้นขอบด้านซ้ายหนาให้กับองค์ประกอบ |
| w3-rightbar | เพิ่มเส้นขอบหนาด้านขวาให้กับองค์ประกอบ |
| w3-topbar | เพิ่มเส้นขอบหนาด้านบนให้กับองค์ประกอบ |
การเพิ่มพรมแดน
คลาส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 ตัวใดตัวหนึ่ง:
ฉันมีเส้นขอบปกติ
ฉันมีขอบมนเล็ก
ฉันมีขอบโค้งมน
ฉันมีขอบมนขนาดใหญ่
ฉันมีขอบมนขนาดใหญ่
ฉันมีขอบมน 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- เปลี่ยน สีของเส้นขอบเมื่อวางเมาส์:
เส้นขอบที่เปลี่ยนเป็นสีแดงเมื่อโฮเวอร์
เส้นขอบสีแดงที่เปลี่ยนเป็นสีเขียวเมื่อโฮเวอร์
ตัวอย่าง
<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>