أساسيات لغة CSS | الدرس 17 (border-radius)

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

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

خاصية border-radius تأخذ قيمة رقمية ب px أو em أو %

لنجرب ذلك مع الديفات التالية:

سنعطي تنسيقا موحدا للبلوكات ثم بعد ذلك نخصص كل بلوك بقيمة خاصة للخاصية border-radius :

وهذه هي النتيجة:

كما تلاحظ كلما زادت القيمة زادت درجة الإنحناء حتى وصلنا للقيمة 100px فحصلنا على شكل دائري ، وأي قيمة أخرى تتجاوز 100px لن تأتي بالجديد سوى هذا الشكل الدائري.

وإذا فرضنا بأننا نريد الإنحناء في زاوية محددة دون الأخرى فيمكننا ذلك بإضافة الإتجاه العمودي والأفقي للخاصية بحيث نشير إلى الزاوية المحددة التي نريدها.

ويمكننا بذلك تطبيق الإنحناء على زاوية دون الأخرى أو تطبيقه على كل الزوايا بقيم مختلفة فنكتب:

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

ليكن نفس كود html السابق سنعدل فقط على css بحيث نضع التنسيق السابق ضمن تعليق حتى لا ينفذ ثم نضع القواعد الجديدة:

وهذه هي النتيجة:

ويمكنك التجربة والإبداع في هذا كما تريد.

التوافق مع المتصفحات

لأن هذه الخاصية من الخصائص الجدد التي جاءت بها css3 الإصدار الأخير للغة css فإنها قد لا تشتغل على كل المتصفحات وبالخصوص بعض الإصدارات القديمة ، لذا اخترعوا في منظمة w3c ما يسمى بالبادئات prefixes وهي حروف تبدأ بعلامة - وتنتهي بها وتشير إلى نوع المتصفح المطلوب منه بذل قصارى جهده وإمكانياته لتفعيل الخاصية ، وتنفع مع الإصدارات الجديدة وبعض الإصدارات القديمة .

وتستخدم البادئة prefixe مع العديد من خصائص css3 وليس فقط border-radius فنكتب :

border-radius (الخاصية العامة)

moz-border-radius- (متصفح firefox)

webkit-border-radius- (متصفح safari)

o-border-radius- (متصفح opera)

ms-border-radius- (متصفح internet explorer)

نبدأ أولا بالخاصية العامة ثم نخصص بالبادئة لكل متصفح.

والآن سنعدل على كود css الذي كتبناه في المثال الأول ، ويمكنك تطبيق نفس الشيء على المثال الثاني الذي حددنا فيه الإتجاهات بنفس الطريقة :

درس هذا اليوم بسيط جدا ، موعدنا في الدروس القادمة مع المزيد من خصائص css3 ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.