ویژگی border-start-start-radius CSS

صفحه قبل border-start-end-radius
صفحه بعدی border-style

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

border-start-start-radius ویژگی برای تعریف نیم‌محیط گوشه‌های ابتدایی (block-start) و ابتدایی (inline-start) استفاده می‌شود.

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

اگر border-start-start-radius اگر ویژگی دو مقدار دارد، گوشه‌ها یک بیضی خواهند بود:

border-start-start-radius: 50px 100px;

اگر border-start-start-radius اگر ویژگی یک مقدار دارد، گوشه‌های گرد خواهند بود:

border-start-start-radius: 50px;

CSS border-start-start-radius ویژگی با border-bottom-left-radiusوborder-bottom-right-radiusوborder-top-left-radius و border-top-right-radius بسیار مشابه هستند، اما border-start-start-radius ویژگی‌ها وابسته به مسیر بلوک و مسیر درون‌خطی هستند.

مثال

مثال 1

برای اضافه کردن قوس‌ها به ابتدای مسیر بلوک و مسیر درون‌خطی برخی از عناصر:

#example1 {
  background-color: lightblue;
  border-start-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-start-radius: 50%;
  writing-mode: vertical-rl;
}

آزمایش کنید

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

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

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-start-radius: 25px;
}

آزمایش کنید

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

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

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-start-radius: 25px;
}

آزمایش کنید

جمله‌بندی CSS

border-start-start-radius: 0|length|initial|inherit;

مقدار ویژگی

مقدار	توضیح
0	مقدار پیش‌فرض.
length	شکل قوس در ابتدای مسیر بلوک و مسیر درون‌خطی تعریف می‌کند. لطفاً به:واحدهای CSS.
%	این شکل قوس را با درصد طول عنصر در محور مربوطه تعریف می‌کند.
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial.
inherit	این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض:	0
ارث‌پذیری:	خیر
انیمیشن‌سازی:	پشتیبانی. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	CSS3
جمله‌بندی JavaScript:	object.style.borderStartStartRadius="50px"