قم بإنشاء مربع مستدير باستخدام CSS

سنقوم بعد ذلك بإنشاء صفحة xHTML، والتي تحتوي على منطقتي محتوى تحتويهما DIVs بمعرفات FixedBox وFlowBox، وهما DIVs بعرض ثابت وعرض غير ثابت .

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

إضافة زوايا مستديرة إلى مربع ذي حجم ثابت الخطوة 1: إنشاء مستند xHTML أساسي وإضافة القليل من المحتوى إليه
عرض نسخة عادية إلى الحافظة؟

هل تريد عرض نسخة عادية على الحافظة؟
الجسم، أتش تي أم أل {
الهامش:0;
الحشو: 0؛
الخلفية:#a7a09a;
اللون: #000؛
}

الجسم، أتش تي أم أل {
الهامش:0;
الحشو: 0؛
الخلفية:#a7a09a;
اللون: #000؛
}الخطوة 2: قم بتعيين العرض ولون الخلفية لـ DIV
عرض نسخة عادية إلى الحافظة؟
شعبة#fixedBox {
العرض: 340 بكسل؛
الهامش: 40 بكسل؛
الخلفية: #E4ECF9؛
}

شعبة#fixedBox {
العرض: 340 بكسل؛
الهامش: 40 بكسل؛
الخلفية: #E4ECF9؛
}الخطوة 3: أنشئ مستطيلًا مستديرًا استنادًا إلى عرض DIV بما أنني قمت بتعيين عرض DIV على 340 بكسل، فأنا الآن بحاجة إلى إنشاء مستطيل مستدير بعرض 340 بكسل. بعد إنشاء المستطيل، ضع الجزء العلوي تم قطع المستطيل بأكمله مع الجزء السفلي واستخدامه كصورة DIV، وقد قمت بعمل الصورتين التاليتين:

الخطوة 4: قم بتطبيق الصورة على خلفية DIV
عرض نسخة عادية إلى الحافظة؟
شعبة#fixedBox {
العرض: 340 بكسل؛
الهامش: 40 بكسل؛
الخلفية: #E4ECF9 url(images/bottom.gif) المركز السفلي بدون تكرار؛
}

شعبة#fixedBox {
العرض: 340 بكسل؛
الهامش: 40 بكسل؛
الخلفية: #E4ECF9 url(images/bottom.gif) المركز السفلي بدون تكرار؛
}div#fixedBox h2{
الهامش:0;
الحشو: 2 بكسل؛
الخلفية: #E4ECF9 url(images/top.gif) المركز العلوي بدون تكرار؛
}

أعلاه، نطبق الصورة المسماة Bottom.gif في أسفل DIV، ثم نستخدم Top.gif على العنصر الأول H2 من DIV. بالطبع، أول شيء يجب أن ننتبه إليه هنا هو أننا لا نستطيع الإضافة هامش إلى القيمة h2 أو إضافة الحشو أو الحدود إلى DIV.

قم بإنشاء مربع مستدير غير ثابت العرض ما قلناه أعلاه هو إنشاء مربع مستدير بعرض ثابت ولكن ليس بارتفاع ثابت، وهذا يتطلب صورتين، أعلى وأسفل، لذا، الآن إذا لم نحدد العرض والارتفاع فكر في الأمر للحظة، ستجد أنه سيتعين علينا هذه المرة استخدام 4 صور، صورة واحدة في كل زاوية لإنشاء مستطيل مستدير يمكن تصغيره بأي شكل من الأشكال، وما زلنا بحاجة إلى إنشاء حاوية DIV أولاً و إضافة المحتوى الأساسي.

الخطوة 1: إنشاء مستند xHTML
عرض نسخة عادية إلى الحافظة؟

الخطوة الثانية هي إنشاء زوايا مستديرة. قم بإنشاء أربع زوايا مستديرة في الاتجاهات العلوية اليسرى والسفلى اليسرى واليمنى السفلية والزوايا الدائرية المكتملة كما يلي:

الخطوة 3: هل تريد تعيين لون خلفية

نسخة DIVview العادية على طباعة الحافظة؟
شعبة#flowBox {
الهامش: 40 بكسل؛
الخلفية: #C3D9FF؛
}

شعبة#flowBox {
الهامش: 40 بكسل؛
الخلفية: #C3D9FF؛
} الخطوة 5: إضافة زوايا مستديرة

. بالنسبة لحاويات DIV التي ليس لها عرض وارتفاع ثابت، يجب أن تكون أي زاوية مستديرة قادرة على تغيير موضعها وفقًا للتغيرات في عرض وارتفاع DIV، بحيث يمكننا فقط إضافة زوايا مستديرة إلى الزوايا الثابتة. -width DIV. تتم معالجة الصور ذات العرض الثابت المستخدمة هنا إلى صورتين صغيرتين، ويمكن إضافتها مباشرة إلى عنصر H2. الآن بعد أن أضفنا عنصر H2، نحصل على جانب واحد فقط من الزاوية المستديرة، ولا يزال هناك يتم الحصول على زاوية مستديرة واحدة يمكن استخدامها في H2، بحيث يتم حل زاويتين دائريتين، ويمكن للعنصر p أن يوفر زاوية مستديرة واحدة، ويحتوي div نفسه على زاوية مستديرة واحدة، وهي بالضبط أربع زوايا مستديرة.

عرض نسخة عادية إلى الحافظة؟
شعبة#flowBox {
الهامش: 40 بكسل؛
الخلفية: #C3D9FF url(images/bottom-left.gif) عدم التكرار أسفل اليسار؛
}

شعبة #flowBox h2 {
الهامش:0;
الحشو: 0؛
الخلفية: #C3D9FF url(images/top-left.gif) بدون تكرار أعلى اليسار؛
}

شعبة #flowBox h2 تمتد {
الهامش:0;
عرض:كتلة؛
الخلفية: #C3D9FF url(images/top-right.gif) بدون تكرار أعلى اليمين؛
}

شعبة #flowBox ص {
الهامش:0;
الحشو: 0؛
الخلفية: #C3D9FF url(images/bottom-right.gif) عدم التكرار أسفل اليمين؛
}