الحدود الدائرية border-radius في CSS

الحدود الدائرية – نصف قُطر-


الحدود الدائرية ، وما أدراك ما هي ! إنها الأمنية الخالدة التي ظل مشرفو المواقع يترقبون تحقيقها منذ ولادة  CSS3 ، لقد أصبح اليوم من السهل إنشائها و بسهولة !

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

 

 

يتم رؤية التدوير إذا كان للعنصر حدود ، كما في الشكل التالي:

 

حدود دائرية

 

هنا سأعطيك مثال آخر جميل مر بذهني الآن و أردت أن أطبقه ليستفيد منه الجميع، و هو وضع خلفية للفقرة المحاطة بالحدود الدائرية :

 

 

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

 

 

و من الجميل أيضاً في الزوايا الدائرية للحدود أنه يمكننا تحديد شكل التدوير لكل زاوية، وذلك بإدخال أربع قيم لهاته الزوايا:

تنطبق القيم المذكورة فوق  مع أركان الزوايا التالية بهذا الترتيب:

  1. الركن اليسار العلوي
  2. الركن اليمين العلوي
  3. الركن اليمين السفلي
  4. الركن الأيسر السفلي

 


أخيرًا ، من الممكن تحسين تدوير زوايا الحدود عن طريق إنشاء منحنيات كما في الشكل الموالي. و في هذه الحالة ، يجب عليك تحديد قيمتين مفصولتين بشرطة مائلة ( slash / ).

و إليك الكود لذلك:

 

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

ياله من شكل عجيب! حدود  شبه بيضاوية و يمكنك اللعب بالقيم للحصول على أشكل مختلفة.

 


 

ليس هذا فحسب ولكن هناك المزيد .. والآتي أجمل 

مثلاً هاته القيم :

 

 

تعطينا هذا الشكل:

واوووو ! رااائع ! 

ما زال CSS3 يخفي لنا المزيد :

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

  • التطبيق على  صورة الخلفية:  

 

الآن سأنهي درس الحدود بمفاجأة أخرى :

يمكننا تطبيق الحدود الدائرية border-radius على الصور أيضاً و هذا يعطي للصورة مظهراً رائعـاً 😛 

 

 

الصورة بلا حدود ظاهرة

 

إحاطة الصورة بحدود دائرية  border-radius

يمكنك أن تغير في قيم الحدود لتعثر على نتائج مختلفة.

إلى هنا أكون قد أنهيت درس الحدود ب CSS3  متمنياً أن يكون الدرس  مفيداً

  • لا تقرأ وترحل، اترك تعليقاً ، لنستمر في العطاء.

1 فكرة عن “الحدود الدائرية border-radius في CSS”

اترك تعليقا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

    مؤسس موقع :
        عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.
كتب 255 مقالة في jabism.com.

عدد المشاهدات لهذه المقالة : 145
انتقل إلى أعلى