ویژگی border-inline-start CSS

صفحه قبلی border-inline-end-width
صفحه بعدی border-inline-start-color

定义和用法

border-inline-start 属性是以下属性的简写：

CSS border-inline-start 属性与 CSS 属性 border-bottom、border-left、border-right و border-top 非常相似，但 border-inline-start 属性依赖于行内方向。

注意：相关的 CSS 属性 writing-mode、text-orientation و direction تعریف مسیر درون‌خطی. این تأثیرات را بر موقعیت شروع و پایان یک خط و border-inline-start نتیجه ویژگی. برای صفحات انگلیسی، مسیر درون‌خطی از چپ به راست و مسیر بلوک از بالا به پایین است.

مثال

مثال 1

تنظیم عرض، رنگ و نوع لبه در ابتدای مسیر درون‌خطی:

div {
  border-inline-start: 10px solid pink;
}

آزمایش کنید

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

موقعیت لبه در ابتدای مسیر درون‌خطی تحت تأثیر writing-mode تأثیرات ویژگی:

div {
  writing-mode: vertical-rl;
  border-inline-start: 5px solid blue;
}

آزمایش کنید

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

موقعیت لبه در ابتدای مسیر درون‌خطی تحت تأثیر direction تأثیرات ویژگی:

div {
  direction: rtl;
  border-inline-start: 5px solid hotpink;
}

آزمایش کنید

آموزش دستور زبان CSS

border-inline-start: border-inline-start-width border-inline-start-style border-inline-start-color|initial|inherit;

مقدار ویژگی

مقدار	توضیح
border-inline-start-width	عرض لبه در ابتدای مسیر درون‌خطی تعیین می‌شود. مقدار پیش‌فرض medium است.
border-inline-start-style	نوع لبه در ابتدای مسیر درون‌خطی تعیین می‌شود. مقدار پیش‌فرض none است.
border-inline-start-color	رنگ لبه در ابتدای مسیر درون‌خطی تعیین می‌شود. مقدار پیش‌فرض به رنگ کنونی لبه است.
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: initial.
inherit	این ویژگی از عنصر والد خود ارث می‌برد. لطفاً به: inherit.

جزئیات فنی

مقدار پیش‌فرض:	medium none currentcolor
میراث‌پذیری:	خیر
انیمیشن‌سازی:	پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	CSS3
آموزش دستور زبان جاوااسکریپت:	object.style.borderInlineStart="pink dotted 5px"