اطراف

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Tutorial‏ | Borders(تغییرمسیر از CSS:کادرها/اطراف)
پرش به ناوبری پرش به جستجو

از مثال‌های صفحات قبلی مشاهده کردید که می‌توان کادرهای مختلفی را برای هر طرف (هر ضلع کادر) مشخص کرد.[۱]

همچنین در CSS، ویژگی‌هایی برای مشخص کردن هر یک از کادرهای (بالا، راست، پایین، و چپ) وجود دارد:

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}


مثال بالا نتیجه‌ای مشابه با مثال پایین دارد:

مثال

p {
  border-style: dotted solid;
}


بنابراین، نحوه کار به صورت زیر است:

اگر ویژگی border-style دارای چهار مقدار باشد:
  • کادر بالایی به صورت نقطه چین است
  • کادر سمت راست به صورت solid است
  • کادر پایین به صورت double است
  • کادر سمت چپ خط چین است
border-style: dotted solid double dashed;
اگر ویژگی border-style دارای سه مقدار باشد:
  • کادر بالایی به صورت نقطه چین است
  • کادرهای سمت راست و چپ از نوع solid هستند
  • کادر پایین از نوع double است
border-style: dotted solid double;
اگر ویژگی border-style دو مقدار داشته باشد:
  • کادرهای بالا و پایین از نوع نقطه چین هستند
  • کادرهای راست و چپ نیز از نوع solid هستند
border-style: dotted solid;
اگر border-style فقط دارای یک مقدار باشد:
  • تمامی چهار جهت از نوع نقطه چین هستند
border-style: dotted;


مثال

/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}


ویژگی border-style در مثال بالا استفاده شده‌است. با این حال، این ویژگی با ویژگی‌های border-width و border-color نیز کار می‌کند.


منابع آموزشی