خصائص الحواف الدائرية البداية-النهاية للCSS

الصفحة السابقة border-spacing
الصفحة التالية border-start-start-radius

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

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

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

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

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

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

border-start-end-radius: 50px;

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

مثال

مثال 1

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

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

تجربة شخصية

مثال 2: دمج خصائص direction

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

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

تجربة شخصية

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

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

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

تجربة شخصية

جملة CSS

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

قيمة الخصائص

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

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

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