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

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


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

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

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

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

 

حدود دائرية

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

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

 

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

 

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

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


 

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

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

 

 

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

 

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

 


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

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

 

 

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

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

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

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

 

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

 

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

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

 

 

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

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

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

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

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.


قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

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

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 467 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

450 عدد المشاهدات لهذا المحتوى
Scroll to Top