آموزش Border واکنشگرا
من border از همه طرف را دارم.
من فقط border سمت چپ دارم.
من border بالا و پایین به رنگ سبز دارم.
من border آبی دارم.
border صورتی رنگ با رفتن موس روی آن تبدیل به آبی می شود.
کلاس های تنظیم لبه (border) در W3.CSS
W3.CSS کلاس های border زیر را مهیا میکند :
| کلاس | تعریف |
|---|---|
| w3-border | border(بالا، راست،پایین،چپ) به یک عنصر می افزاید. |
| w3-border-top | border بالا به یک عنصر اضافه می کند. |
| w3-border-right | border راست به یک عنصر اضافه میکند. |
| w3-border-bottom | border پایین به یک عنصر اضافه میکند. |
| w3-border-left | border چپ به یک عنصر اضافه میکند. |
| w3-border-0 | همه border ها را حذف میکند. |
| w3-border-color | border را با یک رنگ خاص (مانند قرمز،آبی یا ...) نمایش میدهد. |
| w3-hover-border-color | رنگ border با قابلیت تغییر در هنگام رفتن موس روی آن به عنصر اضافه میکند. |
| w3-bottombar | border پایین ضخیم به عنصر می افزاید. |
| w3-leftbar | border چپ ضخیم به عنصر می افزاید. |
| w3-rightbar | border راست ضخیم به عنصر می افزاید. |
| w3-topbar | border بالای ضخیم به عنصر می افزاید. |
افزودن border
کلاس های w3-border به هر عنصر border می افزایند:
من border دارم.
من فقط border چپ دارم.
من border های بالا و پایین دارم.
مثال
<p>I have borders.</p>
</div>
<div کلاس="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>
<div کلاس="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>
رنگ های border
کلاس های w3-border-color برای افزودن رنگ به border ها استفاده میشوند:
من border های قرمز دارم.
من border چپ به رنگ آبی دارم.
من border سبز بالا و پایین دارم.
من border چپ و رنگ پس زمینه قرمز دارم.
مثال
<p>I have red borders.</p>
</div>
<div کلاس="w3-panel w3-border-left w3-border-blue">
<p>I have a blue left border.</p>
</div>
<div کلاس="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>I have a green top and bottom border.</p>
</div>
border های گردشده
برای افزودن border های گردشده ، یکی از کلاس های w3-round-size را می افزاییم:
border من گرد هست.
مثال
<p>I have rounded borders.</p>
</div>
border های ضخیم
کلاس هایw3-topbar, w3-bottombar, w3-leftbar و w3-rightbar برای افزودن border های ضخیم به یک عنصر مورد استفاده قرار میگیرند:
مثال
<p>I have a thick left border.</p>
</div>
<div کلاس="w3-panel w3-leftbar w3-border-blue">
<p>I have a thick blue left border.</p>
</div>
<div کلاس="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 کلاس="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>
border های با قابلیت hover
کلاس های w3-hover-border-color رنگ border را زمانی که موس روی عنصر میرود تغییرمیدهند:
border صورتی با رفتن موس روی عنصر آبی می شود.
مثال
<p>Red hoverable border</p>
</div>
<div کلاس="w3-panel w3-border w3-border-purple w3-hover-border-blue">
<p>Purple border that turns blue on hover</p>
</div>
<div کلاس="w3-panel w3-pale-red w3-leftbar w3-border-red w3-hover-border-green">
<p>Thick red left border that turns green on hover.</p>
</div>
- نوشته شده توسط زهرا داوودی
- بازدید: 3750
