کناره‌های CSS

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 تنظیمات ویژگی چهار مقدار دارد:

border-style: dotted solid double dashed;

  • کادر بالا خط ضعیف است
  • کادر راست خط محکم است
  • کادر پایین خط دوگانه است
  • کادر چپ خط ضعیف است

اگر border-style تنظیمات ویژگی سه مقدار دارد:

border-style: dotted solid double;

  • کادر بالا خط ضعیف است
  • لبه‌های سمت راست و چپ خط‌های صاف هستند
  • کادر پایین خط دوگانه است

اگر border-style ویژگی دو مقدار تنظیم می‌کند:

border-style: dotted solid;

  • لبه‌های بالا و پایین خط‌های افقی هستند
  • لبه‌های سمت راست و چپ خط‌های صاف هستند

اگر border-style ویژگی یک مقدار تنظیم می‌کند:

border-style: dotted;

  • همه‌ی چهار لبه به صورت خط‌های افقی هستند

مثال

/* چهار مقدار */
p {
  border-style: dotted solid double dashed; 
}
/* سه مقدار */
p {
  border-style: dotted solid double; 
}
/* دو مقدار */
p {
  border-style: dotted solid; 
}
/* یک مقدار */
p {
  border-style: dotted; 
}

آزمایش کنید

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