حدود W3.CSS
لدي حدود.
لدي فقط حد أيسر.
لدي حد أخضر علوي وسفلي.
لدي حدود زرقاء.
حد أحمر يتحول إلى اللون الأخضر عند المرور فوقه.
فئات حدود W3.CSS
يوفر W3.CSS فئات الحدود التالية:
| فصل | يعرّف |
|---|---|
| w3- الحدود | يضيف حدودًا (أعلى ، يمين ، أسفل ، يسار) إلى عنصر |
| w3- الحد الأعلى | يضيف حدًا علويًا إلى عنصر |
| w3- الحدود اليمنى | يضيف حدًا أيمنًا إلى عنصر |
| w3- الحد السفلي | يضيف حدًا سفليًا إلى عنصر |
| w3- الحدود اليسرى | يضيف حدًا أيسر إلى عنصر |
| w3- الحدود 0 | يزيل كل الحدود |
| w3- الحدود- اللون | يعرض الحد بلون محدد (مثل الأحمر والأزرق وما إلى ذلك) |
| w3- تحوم-الحدود- اللون | يضيف لون حد قابل للتحويم |
| w3- قاع | يضيف حدًا سفليًا سميكًا إلى عنصر |
| w3- يسار | يضيف حدًا أيسر سميكًا إلى عنصر |
| 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>