CSS

CSS Rounded Borders
الإطارات المستديرة في لغة CSS

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

التاريخ

13 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2172

المواضيع

24
الشروحات chevron_left CSS Rounded Borders chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Rounded Borders
الإطارات المستديرة في لغة CSS

</> CSS Rounded Borders
الإطارات المستديرة في لغة CSS

تُستخدم خاصية border-radius في لغة CSS لتحويل حدود (أطراف - زوايا) الإطارات من زاوية مربعة إلي زاوية دائرية ويمكن التحكم في حجم التدوير بوحدة pixel بيكسل أو بالنسب المئوية.


قيم خاصية  border-radius في لغة CSS:

  • length حجم التدوير بوحدة بيكسل وأصغر قيمه هي 1 بيكسل وأكبر قيمة إذا كان طول العنصر 100 بيكسل وعرضة 100 بيكسل فأعلي قيمة هي 50 بيكسل فقط.
  • percentage هي نسبة مئوية وأصغر قيمه هي %1 وأكبر قيمة إذا كان طول العنصر 100 بيكسل وعرضة 100 بيكسل فأعلي قيمة هي %50 فقط.
border-radius syntax

طريقة كتابة خاصية border-radius في لغة CSS.

border-radius:value;
border-radius values

قيم خاصية border-radius في لغة CSS.

border-radius:1-4 length|% / 1-4 length|%|initial|inherit;
CSS Rounded Borders

يوضح المثال التالي كيفية جعل زوايا الإطار مستديرة.

p 
{
  border: 2px solid red;
  border-radius: 5px;
}
مهم
  • لا تعمل خاصية border-radius بدون خاصية border  في لغة CSS فيجب عليك إضافة border بحجم ولون ونوع قبل عمل تدوير له فليس من المنطقي إضافة تدوير علي إطار غير موجود.
  • يُمكن التحكم في إستدارة زاوية واحدة أو زوايتين أو ثلاث زوايه وترك المُتبقي مربع عن طريق إستخدام خصائص sides الجوانب مع الإطارات في لغة CSS.

</> CSS Borders Radius With Pixel
التحكم بتدوير الإطار بواحدة بيكسل في لغة CSS

تُستخدم خاصية border-radius مع وحدة pixel البيكسل للتحكم بحجم تدوير زوايا الإطار الداخلي (border).

CSS Borders Radius With Pixel

خاصية border-radius مع وحدة pixel في لغة CSS.

p
{
  border: 2px solid red;
  border-radius: 12px;
}

</> CSS Borders Radius With Percentage
التحكم بتدوير الإطار من خلال النسبة المئوية في لغة CSS

تُستخدم خاصية border-radius مع وحدة Percentage النسبة المئوية % لتحكم بحجم تدوير زوايا الإطار الداخلي (border).

CSS Borders Radius With Percentage

خاصية border-radius مع وحدة % في لغة CSS.

p
{
  border: 2px solid red;
  border-radius: 30% ;
}

</> CSS Borders Radius Shorthand
اختصار خاصية borders-radius في لغة CSS

يُمكن في لغة CSS إعطاء كل زاوية من زوايا الإطار الداخلي border تدوير كامل أو تدوير نصفي.

توضيح: يمكن جعل أحد زوايا الإطار مدورة كثيراً، وجعل زاوية ثانية أقل تدوير، وترك باقي الزوايا مربعة بدون عمل تدوير لها.


تحديد حجم التدوير لكل زاوية من زوايا الإطار الداخلي border على حدى:

  • border-top-left-radius تُستخدم لتحديد حجم تدوير الزاوية العلوية في اليسار.
  • border-top-right-radius تُستخدم لتحديد حجم تدوير الزاوية العلوية في اليمين.
  • border-bottom-right-radius تُستخدم لتحديد حجم تدوير الزاوية السفلية في اليمين.
  • border-bottom-left-radius تُستخدم لتحديد حجم تدوير الزاوية السفلية في اليسار.
CSS Border Top Left Radius

تحديد حجم تدوير الزاوية العلوية في اليسار عن طريق خاصية border-top-left-radius في لغة CSS.

p
 {
  border: 2px solid red;
  border-top-left-radius: 12px;
}
CSS border top right radius

تحديد حجم تدوير الزاوية العلوية في اليمين عن طريق خاصية border-top-right-radius في لغة CSS.

p
 {
  border: 2px solid red;
  border-top-right-radius: 12px;
}
CSS border bottom right radius

تحديد حجم تدوير الزاوية السفلية في اليمين عن طريق خاصية border-bottom-right-radius في لغة CSS.

p
 {
  border: 2px solid red;
  border-bottom-right-radius: 12px;
}
CSS border bottom left radius

تحديد حجم تدوير الزاوية السفلية في اليسار عن طريق خاصية border-bottom-left-radius في لغة CSS.

p
 {
  border: 2px solid red;
  border-bottom-left-radius: 12px;
}

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

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

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

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

توضيح:

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

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

p
 {
  border: 2px solid red;
  border-radius: 5px;
}
CSS border radius: value1 value2

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

p
 {
  border: 2px solid red;
  border-radius: 7px 3px;
}
CSS border radius value1 value2 value3

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

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.

p
 {
  border: 2px solid red;
 border-radius: 3px 7px 5px 10px;
}
مصطلحات الدرس
Rounded
Rounded

مدور / دائري

Borders
Borders

حدود

Radius
Radius

منتصف القطر / الكوع الجانبي

Element
Element

عنصر

Property
Property

خاصية

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.