ولادت حضرت معصومه (س) و روز دختر مبارک، (کد تخفیف 35%: rozedokhtar)

سبد خرید (0)

آموزش Border واکنشگرا

من  border از همه طرف را دارم.

من فقط 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 های بالا و پایین دارم.

مثال

<div کلاس="w3-panel w3-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 چپ و  رنگ پس زمینه قرمز دارم.

مثال

<div کلاس="w3-panel w3-border w3-border-red">
  <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 من گرد هست.

مثال

<div کلاس="w3-panel w3-border w3-round-xlarge">
  <p>I have rounded borders.</p>
</div>
خودتان امتحان کنيد »

border های ضخیم

کلاس هایw3-topbar, w3-bottombar,  w3-leftbar و  w3-rightbar برای افزودن border های ضخیم به یک عنصر مورد استفاده قرار میگیرند:

من border ضخیم چپ دارم.

من border ضخیم  سمت چپ  آبی دارم.

من border ضخیم سمت چپ به رنگ آبی دارم و رنگ پس زمینه قرمز کم رنگ دارم.

من border ضخیم بالا و پایین به رنگ قرمز و رنگ پس زمینه قرمز کم رنگ دارم.

مثال

<div کلاس="w3-panel w3-leftbar">
  <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 ها قرمز می شوند.

border صورتی با رفتن موس روی عنصر آبی می شود.

border ضخیم سمت چپ به رنگ قرمز با رفتن موس روی عنصر، سبز می شود.

مثال

<div کلاس="w3-panel w3-border w3-hover-border-red">
  <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>
خودتان امتحان کنيد »