مقدمة: في مقالتي " حل شبه مثالي لإطار زاوية مستدير أنيق للغاية "، قمت بتلخيص سبعة حلول مختلفة لصناديق الزاوية المستديرة، والتي تلخص بشكل أساسي حلول تنفيذ صناديق الزاوية المستديرة الشائعة على الإنترنت. وفي مقالتي الأخرى "Pictureless Peak Corner" هناك طريقة تنفيذ بديلة أخرى.
يعد تنفيذ الزوايا الدائرية باستخدام CSS النقي حدثًا سيئًا، وقد كتبت أيضًا مقالتين موجزتين. في مشاريعنا السابقة، غالبًا ما تم تنفيذ الزوايا المستديرة باستخدام صور الخلفية، ومع ذلك، عندما تم إصدار هذه المشاريع عبر الإنترنت، أثناء عملية الصيانة، كان من الضروري أحيانًا إضافة بعض المتطلبات الجديدة لأنها كانت تستخدم على نطاق واسع في المشاريع السابقة صور الزاوية، ويتم دمج هذه الصور كلها باستخدام CSS Sprites حتى لا تضيف المزيد من العمل الإضافي، وكذلك لا ترغب في استخدام JS لإضافة المزيد من طلبات http، هناك حاجة إلى بعض حلول CSS البسيطة لحل هذه المشكلة. أما بالنسبة لتفضيلاتي الشخصية، فأنا أيضًا أحب استخدام أسلوب خالٍ من الصور للتعامل مع هذه التأثيرات. أشعر دائمًا أن CSS يمكنه القيام بهذه المهمة، فلماذا لا أتركها يتم إنجازها؟
مبدأ التنفيذ :
لقد تم شرح مبدأ تنفيذ مربع زاوية مستدير باستخدام CSS النقي بالتفصيل من قبل العديد من الأشخاص على الإنترنت. الرسم البياني أدناه هو التأثير بعد تكبير إحدى الزوايا المستديرة.
.png)
الشكل 1
من العرض أعلاه، يمكننا أن نرى أن هذا الصندوق المستدير يتكون بالفعل من حاويات. كل حاوية لها عرض مختلف ويتم تحقيق هذا العرض عن طريق الهامش، مثل: Margin:0 5px; الجوانب اليمنى هي 5 بكسل، وهناك 5 خطوط من الأعلى إلى الأسفل، والهوامش هي 5 بكسل، و3 بكسل، و2 بكسل، و1 بكسل، متناقصة بالترتيب. لذلك بناءً على هذا المبدأ، يمكننا تنفيذ بنية وأسلوب HTML بسيط.
1. طبقة هيكل HTML:
تشكل b1~b4 هيكلي الزاوية المستديرة اليمنى واليسرى أعلاه، بينما تشكل b5~b8 هيكلي الزاوية المستديرة اليمنى واليسرى أدناه. المحتوى هو النص الرئيسي للمحتوى. ضعه كله في حاوية كبيرة وأعطه اسم فئة واضحًا لتعيين نمط مشترك. ثم يتم فرض اسم فئة color1 عليه، ويتم استخدام اسم الفئة هذا للتمييز بين أنظمة الألوان المختلفة، لأنه قد تكون هناك زوايا مستديرة بألوان مختلفة.