انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: الإطارات المستديرة في لغة CSS

CSS Borders Radius Shorthand خاصية borders-radius في لغة CSS

سوف تتعلم في هذا الدرس كيفية عمل الإطارات المستديرة والتي تكون خارج حدود العنصر أعلي أو بعد border في لغة CSS.

1 صفوف تعليمية
لغة CSS
5,128 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يُمكن في لغة CSS إعطاء كل زاوية من زوايا الإطار الداخلي border تدوير خاص بها، وذلك على سطر واحد دون الحاجة لإعادة كتابة التعليمة border-radius لكل زاوية.

قيم متعدّدة داخل خاصية border-radius:

يتم صف جميع قيم خاصية border-radius بشكل متتالي بدون فواصل، لتحديد الإطارات للاتجاهات الأربعة، وترتيبهم كجهة دوران عقارب الساعة.

توضيح:

  • تُمثل الساعة الثانية عشر في عقارب الساعة الاتجاه العلوي top.
  • تُمثل الساعة الثالثة في عقارب الساعة الاتجاه الأيمن right.
  • تُمثل الساعة السادسة في عقارب الساعة الاتجاه السفلي bottom.
  • تُمثل الساعة التاسعة في عقارب الساعة الاتجاه الأيسر left.

CSS Border Radius

CSS border radius value

تُستخدم خاصية border-radius: value لإدخال مقدار التدوير لكل زوايا الإطار مرة واحدة في لغة CSS.

HTML 
p
 {
  border: 2px solid red;
  border-radius: 5px;
}
جرّب بنفسك

CSS border radius: value1 value2

تُستخدم الخاصية border-radius: value1 value2 في الإطار في لغة CSS لإعطاء الزاوية العلوية في اليسار والزاوية السفلية في اليمين حجم التدوير value1، ولإعطاء الزاوية العلوية في اليمين والزاوية السفلية في اليسار جحم التدوير value2.

HTML 
p
 {
  border: 2px solid red;
  border-radius: 7px 3px;
}
جرّب بنفسك

CSS border radius value1 value2 value3

تُستخدم الخاصية border-radius: value1 value2 value3 في الإطار في لغة CSS لإعطاء الزاوية العلوية في اليسار حجم التدوير value1، ولإعطاء الزاوية العلوية في اليمين والزاوية السفلية في اليسار جحم التدوير value2، كما تعطى الزاوية السفلية في اليمين حجم التدوير value3.

HTML 
p.round
 {
  border: 2px solid red;
  border-radius: 10px 7px 3px;
}
جرّب بنفسك

border-radius: value1 value2 value3 value4

تُستخدم الخاصية border-radius: value1 value2 value3 value4 في الإطار في لغة CSS لإعطاء الزاوية العلوية في اليسار حجم التدوير value1، ولإعطاء الزاوية العلوية في اليمين جحم التدوير value2، كما تُعطى الزاوية السفلية في اليمين حجم التدوير value3. ويتم إعطاء الزاوية السفلية في اليسار حجم التدوير value4.

HTML 
p
 {
  border: 2px solid red;
 border-radius: 3px 7px 5px 10px;
}
جرّب بنفسك

جميع فقرات هذا الدرس (الإطارات المستديرة في لغة CSS)