ویژگی border-inline-style CSS

تعریف و استفاده

border-inline-style ویژگی تنظیم می‌کند که طرح حاشیه عنصر در جهت درون خطی چیست.

border-inline-style مقدار ویژگی می‌تواند به روش‌های مختلف تنظیم شود:

اگر border-inline-style ویژگی دو مقدار دارد:

border-inline-style: solid dotted;

• طرح حاشیه در ابتدای درون خطی به صورت خط مستقیم (solid) باشد
• طرح حاشیه در انتهای درون خطی به صورت خط‌چین (dotted) باشد

اگر border-inline-style ویژگی یک مقدار دارد:

border-inline-style: dotted;

• طرح‌های حاشیه در ابتدا و انتهای درون خطی به صورت خط‌چین (dotted) هستند

طرح CSS border-inline-style ویژگی‌ها با border-bottom-style،border-left-style،border-right-style و border-top-style ویژگی‌ها بسیار مشابه هستند، اما border-inline-style ویژگی‌ها بستگی به جهت درون خطی دارند.

توجه داشته باشید:ویژگی‌های CSS مرتبط writing-mode،text-orientation و direction تعریف می‌کند که جهت درون خطی چیست. این تأثیر می‌گذارد که ابتدا و انتهای سطرها کجا قرار می‌گیرند و border-inline-style نتیجه‌ی ویژگی‌ها. برای صفحات انگلیسی، جهت درون خطی از چپ به راست و جهت بلوک‌ها به پایین است.

مثال

مثال 1

تنظیم سبک مرز در مسیر درون‌تر (inline):

#example1 {
  border-inline-style: solid;
}
#example2 {
  border-inline-style: dashed dotted;
}

آزمایش کنید

مثال 2: ترکیب ویژگی writing-mode

موقعیت مرزها در شروع و پایان مسیر درون‌تر (inline) تحت تأثیر writing-mode تأثیر ویژگی:

div {
  writing-mode: vertical-rl;
  border-inline-style: dotted;
}

آزمایش کنید

مثال 3: ترکیب ویژگی direction

موقعیت مرزها در شروع و پایان مسیر درون‌تر (inline) تحت تأثیر direction تأثیر ویژگی:

div {
  direction: rtl;
  border-inline-style: solid dotted;
}

آزمایش کنید

جمله‌بندی CSS

border-inline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.

صفحات مرتبط

راهنما:کشیدگی لبه CSS

مطالعه:ویژگی border CSS

مطالعه:ویژگی border-inline CSS

مطالعه:ویژگی border-inline-style CSS

مطالعه:ویژگی border-bottom-style CSS

مطالعه:ویژگی border-left-style CSS

مطالعه:ویژگی border-right-style CSS

مطالعه:ویژگی border-top-style CSS

مطالعه:ویژگی direction CSS

مطالعه:خصوصیت text-orientation CSS

مطالعه:خصوصیت writing-mode CSS