خصائص دائرة الحدود من البداية لل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;
}

تجربة شخصية

جافا سكريبت:

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

قيمة الخاصية

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الخاصية بشكل كامل.

الصفحات ذات الصلة

دروس:الأشكال المستديرة في CSS

المرجع:خصائص قوس الحدود السفلية اليسرى CSS

المرجع:خصائص قوس الحدود السفلية اليمنى CSS

المرجع:خصائص دائرة الحدود العلوية اليسرى للCSS

المرجع:خصائص دائرة الحدود العلوية اليمنى للCSS

المرجع:خصائص direction CSS

المرجع:خصائص text-orientation في CSS

المرجع:خصائص writing-mode في CSS