CSS – طرفین حاشیه (Border Sides)

CSS - حاشیه‌های فردی (Border Sides)

در 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 نیز کار می‌کند.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.