و

:

< هيئة >

< شعبة صف دراسي = 'ركن' >

< h1 > تلميح لينكس < / h1 >

< ص > زوايا دائرية في CSS < / ص >

< / شعبة >

< / هيئة >

بعد ذلك ، سوف ننتقل إلى قسم CSS.

هنا ، ' .ركن 'للوصول إلى الفئة المخصصة لـ

. بعد ذلك ، سننشئ حدًا باستخدام ' الحدود 'وتعيين قيم العرض والنمط واللون كـ' 4 بكسل '،' صلب '، و ' RGB (248 ، 6 ، 107) '، على التوالى. علاوة على ذلك ، سنضيف العرض ' 250 بكسل '، ارتفاع ' 150 بكسل '، ولون الخلفية' RGB (234 ، 0 ، 255) 'لـ div:

.ركن {

الحدود : 4 بكسل صلب RGB ( 248 و 6 و 107 ) ؛

العرض : 250 بكسل ؛

ارتفاع : 150 بكسل ؛

لون الخلفية : RGB ( 2. 3. 4 و 0 و 255 ) ؛

}

بمجرد تنفيذ الكود المذكور أعلاه ، انتقل إلى ملف HTML وقم بتنفيذه. سترى النتيجة التالية:

الآن ، سوف ننتقل إلى الجزء التالي ، حيث سننشئ الحد المربع إلى حد الزاوية المستديرة.

كيفية جولة الزاوية باستخدام CSS؟

لإنشاء حد زاوية مستدير ، فإن ' نصف قطر الحد 'يتم استخدام الخاصية ، حيث يمكنك ضبط نصف قطر الزاوية وفقًا لتفضيلاتك.

بناء الجملة

يرد أدناه بناء جملة خاصية border-radius:

نصف قطر الحد : القيمة

دعنا نكمل المثال السابق ونضبط نصف قطر الحدود لتحقيق الزوايا المستديرة.

مثال

في ' .ركن 'فئة ملف CSS ، اضبط قيمة' نصف قطر الحد 'الخاصية كـ' 30 بكسل ':

نصف قطر الحد : 30 بكسل ؛

مع إضافة السطر أعلاه ، ستحصل على الناتج التالي:

يشير الإخراج الوارد أعلاه إلى أنه تم تغيير الحدود بنجاح إلى زوايا دائرية بسبب خاصية نصف قطر الحدود.

استنتاج

في CSS ' نصف قطر الحد 'يتم استخدام الخاصية لتغيير زاوية الحدود. يتغير شكل المنحنى وفقًا لقيمة نصف القطر المعطاة. باستخدام الخاصية المذكورة ، يمكنك ضبط نصف قطر الزاوية وفقًا لاختيارك. في هذه المقالة ، أوضحنا كيفية تقريب حدود الزاوية باستخدام خاصية border-radius بمساعدة مثال.