ستناقش هذه المدونة ما يلي:

• ما هو Outline Radius؟
• كيفية تطبيق Outline Radius Effect على HTML Element؟

ما هو مخطط الشعاع؟

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

كيفية تطبيق Outline Radius Effect على HTML Element؟

لاستخدام خاصية المخطط التفصيلي ، انتقل من خلال التعليمات المقدمة.

الخطوة 1: تضمين العناوين

في البداية ، قم بتضمين العناوين من خلال استخدام أي علامة عنوان من '

' ل '

'. على سبيل المثال ، استخدمنا '

' و '

'لتضمين عنوانين مختلفين في مستند HTML.

الخطوة 2: أضف حاوية div الأولى

بعد ذلك ، أضف حاوية باستخدام '

' بطاقة شعار. أيضًا ، أدخل ' صف دراسي 'وحدد اسم الفصل وفقًا لاختيارك.

---

---

الخطوة 3: إنشاء حاوية div الثانية

إنشاء آخر ' شعبة 'باتباع نفس الإجراء:

< h1 نمط = 'اللون: rgb (48 ، 10 ، 218)' > Linuxhint LTD المملكة المتحدة < / h1 >

< h2 >

أمثلة مختلفة لنصف قطر الحدود لإنشاء زوايا مخطط دائري.

< / h2 >

< شعبة صف دراسي = 'box1-div' >

توفر Linuxhint أفضل المحتويات وأكثرها تميزًا لمستخدميها.

< / شعبة >

< شعبة صف دراسي = 'box2-div' >

إنه يعمل على فئات متعددة.

< / شعبة >

يتم عرض إخراج الكود أعلاه أدناه:

الخطوة 4: قم بتعيين مخطط الحاوية الأولى

قم بالوصول إلى الحاوية الأولى باستخدام ' .box1-div 'فئة حيث' . 'محددًا للوصول إلى الفصل الدراسي:

.box1-div {

الخطوط العريضة : صلب ؛

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

حشوة : 15 بكسل ؛

حافة : 25px ؛

}

بعد ذلك ، قم بتطبيق خصائص CSS المدرجة أدناه:

• ال ' الخطوط العريضة 'لإضافة مخطط تفصيلي حول العنصر. على سبيل المثال ، يتم تعيين قيمتها على أنها ' صلب '.
• ' العرض 'حجم العنصر أفقيًا.
• ' حشوة 'لتخصيص المساحة حول محتوى العنصر.
• ' حافة 'تحديد المسافة على الجانب الخارجي من حد العنصر.

الخطوة 5: حدد مخطط الحاوية الثانية

الآن ، يمكنك الوصول إلى العنصر الثاني بمساعدة فئته ' .box2-div ':

.box2-div {

الخطوط العريضة : صلب ؛

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

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

حشوة : 15 بكسل ؛

حافة : 25px ؛

}

تطبيق خاصية CSS ' نصف قطر الحد 'لتحديد نصف قطر العنصر. تتيح لك هذه الخاصية إضافة زوايا مستديرة حول العنصر:

يمكن ملاحظة أننا نجحنا في إضافة تأثير نصف قطر المخطط التفصيلي على عنصر HTML.

استنتاج

ال ' نصف قطر المخطط التفصيلي ' لم يعد متاحا. يمكن للمستخدمين تطبيق خصائص نصف قطر المخطط التفصيلي بمساعدة خصائص 'مخطط تفصيلي' و 'حدود نصف قطر' CSS. ال ' الخطوط العريضة 'مخططًا تفصيليًا للعنصر ، و' نصف قطر الحد 'يستخدم خصيصًا لتصميم المخطط التفصيلي. لقد أوضح هذا المنشور الإرشادات الخاصة بإضافة تأثير نصف قطر المخطط التفصيلي حول العنصر في HTML.