خصائص قوس الحدود المنتهية بالجزء السفلي من الجانب الأيسر CSS

التعريف والاستخدام

border-end-start-radius تستخدم الخاصية لتحديد نصف قطر الزوايا الحواف بين نهاية اتجاه الصفحة (block-end) ومكان بدء الاتجاه السطر (inline-start).

ملاحظة:خصائص CSS ذات الصلة writing-modeوtext-orientation وال direction يحدد اتجاه الصفحة والاتجاه السطر. لهذا السبب فإن هذه الخاصيات تؤثر أيضًا على border-end-start-radius نتيجة الخاصية. للصفحات الإنجليزية، اتجاه السطر هو من اليسار إلى اليمين، واتجاه الصفحة هو من الأعلى إلى الأسفل.

إذا border-end-start-radius إذا كان لديك قيمتين للخصائص، فإن الزوايا الحواف ستكون بيضاوية:

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

إذا border-end-start-radius إذا كان لديك قيمة واحدة للخصائص، فإن الزوايا الحواف ستكون دائرية:

border-end-start-radius: 50px;

CSS border-end-start-radius الخصائص والمزايا border-bottom-left-radiusوborder-bottom-right-radiusوborder-top-left-radius وال border-top-right-radius مثل border-end-start-radius يعتمد الخاصية على الاتجاه الديناميكي والاتجاه الداخلي.

مثال

مثال 1

إضافة زوايا دائرية في نهاية الاتجاه الديناميكي وحافة الاتجاه الداخلي لبعض العناصر:

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

تجربة شخصية

مثال 2: دمج خاصية direction

يؤثر موقع الزاوية الدائرية في نهاية الاتجاه الديناميكي وحافة الاتجاه الداخلي direction تأثير الخاصية:

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

تجربة شخصية

مثال 3: دمج خاصية writing-mode

يؤثر موقع الزاوية الدائرية في نهاية الاتجاه الديناميكي وحافة الاتجاه الداخلي writing-mode تأثير الخاصية:

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

تجربة شخصية

جافا سكربت:

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

قيمة الخاصية

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

دعم المتصفح

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

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

دروس:الزوايا المستديرة CSS

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

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

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

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

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

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

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