جدول الدروس

دستورالعمل مرجع CSS

خصائص CSS

الدورة الخيارية

التوصية بالدورة:

صندوق CodeW3C.com المتميز

خصائص border-end-end-radius CSS

الصفحة السابقة لون الحدود
الصفحة التالية radius البداية النهائية للحدود

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

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;

قيمة الخصائص

القيمة	الوصف
0	القيمة الافتراضية.
length	يحدد شكل الزاوية عند نهاية الاتجاه العكسي للاتجاه العرضي للكتلة.
%	يحدد هذا الشكل الدائري من خلال نسبة الطول إلى طول العنصر في المحور المطلوب.
initial	أضف هذا الخصائص إلى قيمته الافتراضية. انظر initial.
inherit	يرث هذا الخصائص من عنصر الأب. انظر inherit.

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

القيمة الافتراضية:	0
التوريثية:	لا
إنتاج المتحرك:	يدعم. انظر:خصائص المتحرك.
الإصدار:	CSS3
جافا سكربت:	object.style.borderEndEndRadius="50px"