CSS بوردر استارٹ استارٹ رادیئس اپریٹر

定义和用法

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;

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

تعلیم:CSS کونر

مطالعه:CSS بوردر پایین چپ گوشه نمائش

مطالعه:CSS بوردر پایین راست گوشه نمائش

مطالعه:CSS بوردر ابوت چپ راست رادیئس اپریٹر

مطالعه:CSS بوردر ابوت راست چپ رادیئس اپریٹر

مطالعه:CSS سمت کی اپریٹی

مطالعه:CSS text-orientation کی ویژگی

مطالعه:CSS writing-mode کی ویژگی