خواص 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 در زمینه طراحی اپلیکیشن های ویندوز ، موبایل و همچنین طراحی سایت فعالیت دارم و در حال حاضر مدیریت سایت جهان سورس را برعهده دارم و سعی می کنم روزانه آموزش ها و پروژه های برنامه نویسی را با شما به اشتراک بگذارم.

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