CSS ɗauɗi ɗauɗi

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

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

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

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

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

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

border-end-end-radius: 50px;

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

مثال

مثال 1

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

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

تجربة شخصية

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

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

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

تجربة شخصية

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

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

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

تجربة شخصية

جافا سكربت:

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

قيمة الخاصية

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

دعم المتصفح

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

الصفحات المتعلقة

دروس:هوسته CSS نصف دایره

المرجع:CSS ɗauɗi ɗauɗi

المرجع:CSS ɗauɗi ɗauɗi

المرجع:属性 naɗi CSS border-top-left-radius

المرجع:属性 naɗi CSS border-top-right-radius

المرجع:ມາດຕະຖານCSS direction

المرجع:هوسته CSS text-orientation

المرجع:هوسته CSS writing-mode