CSS Rounded Borders
الإطارات المستديرة في لغة CSS
سوف تتعلم في هذا الدرس كيفية عمل الإطارات المستديرة والتي تكون خارج حدود العنصر أعلي أو بعد border في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
