خواص Border در css

خواص Border

در قسمت قبل به خاصیت های پس زمینه در css پرداختیم .در این قسمت Borderها و خواص آن را آموزش خواهیم داد .به نوار مرزی یک عنصر border گفته می شود . خاصیت های border به شما اجازه تعیین سبک یا الگو border و رنگ یا عرض آن را می دهد.

Border Style : این خاصیت مشخص می کند که چه نوع سبک border را برای عنصر بکار ببریم.

  • dotted : نقطه چین
  • dashed: خط چین
  • solid : خط ثابت
  • double : دو خطی
  • groove : شیاردار سه بعدی
  • ridge : شیار سه بعدی
  • inset : حاشیه سه بعدی
  • outset : ابتدا سه بعدی
  • none : بدون border
  • hidden : یک border پنهانی
  • و اینکه می تواند ترکیبی از سبک های بالا باشد ،مانند p.mix

خاصیت عرض و رنگ border :

رنگ ها را می توانیم براساس نام ، مقدار rgb یا مقدار hex مشخص کنیم و یا ترکیبی از رنگها مشخص نماییم.

عرض border را نیز براساس مقدار یا اندازه و یا ترکیبی از اندازه ها مشخص می کنیم.

برای هر طرف از border می توانیم یک استایل تعریف کنیم :

یا اینکه به صورت زیر بنویسیم :
بالا dashed ، راست solid ، پایین dashed ، چپ solid

خاصیت های border را میتوانیم به صورت ترکیبی بکار ببریم . مثال زیر را ببینید :

border های گرد (Rounded Borders) :

برای اینکه بتوانیم از border های گرد استفاده نماییم می بایست از خاصیت border-radius بهره ببریم.

این نکته را هم بدانید که این خاصیت در ورژن های IE9 به بالا کار می کند.

 

این مطلب را با دوستان خود به اشتراک بگذارید :
آموزش CSS آموزش برنامه نویسی

درباره حسین رسولی

از سال 89 در زمینه طراحی اپلیکیشن های ویندوز ، موبایل و همچنین طراحی سایت فعالیت دارم و در حال حاضر مدیریت سایت جهان سورس را برعهده دارم و سعی می کنم روزانه آموزش ها و پروژه های برنامه نویسی را با شما به اشتراک بگذارم.

دیدگاه خود را بیان کنید

با عضویت در خبرنامه از تخفیفات ویژه سایت باخبر شوید

با عضویت در خبرنامه از تخفیفات ویژه سایت باخبر شوید

با موفقیت اشتراک شما ایجاد شد

از ما حمایت کنید