הבלוג הזה ידון ב:

• מהו רדיוס מתאר?
• כיצד להחיל אפקט רדיוס מתאר על אלמנט HTML?

מהו רדיוס המתאר?

ה ' מתווה 'מאפיין משמש לעיצוב קווי המתאר של האלמנט, אך לא ניתן ליישם אותו ישירות. לכן, השיטה החלופית ליישם את אפקט הרדיוס על מתאר היא שימוש ב-' גבול-רדיוס נכס CSS. הוא מציין את הפינות המעוגלות עבור קווי מתאר.

כיצד להחיל אפקט רדיוס מתאר על אלמנט HTML?

כדי להשתמש במאפיין רדיוס המתאר, עברו על ההוראות שניתנו.

שלב 1: הטמע כותרות

תחילה, הטמע את הכותרות על ידי שימוש בכל תג כותרת מ'

' ל '

'. לדוגמה, השתמשנו ב'

' ו'

' תגיות להטמעת שתי כותרות שונות במסמך HTML.

שלב 2: הוסף את מיכל ה-div הראשון

לאחר מכן, הוסף מיכל באמצעות '

'תג. כמו כן, הכנס את ' מעמד ” תכונה וציין את שם המחלקה לפי בחירתך.

---

---

שלב 3: צור מיכל div שני

צור אחר ' div מיכל על ידי ביצוע אותו נוהל:

< h1 סִגְנוֹן = 'color:rgb(48, 10, 218)' > Linuxhint LTD בריטניה < / h1 >

< h2 >

דוגמאות שונות לרדיוס גבול ליצירת פינות של מעגל מתאר.

< / h2 >

< div מעמד = 'box1-div' >

Linuxhint מספקת את התוכן הטוב והייחודי ביותר עבור המשתמשים שלה.

< / div >

< div מעמד = 'box2-div' >

זה עובד על מספר קטגוריות.

< / div >

הפלט של הקוד לעיל מוצג להלן:

שלב 4: הגדר את קווי המתאר של המכולה הראשונה

גש למיכל הראשון על ידי שימוש ב' .box1-div מחלקה שבה ' . ' הוא בורר לגישה לכיתה:

.box1-div {

מתווה : מוצק ;

רוֹחַב : 300 פיקסלים ;

ריפוד : 15 פיקסלים ;

שולים : 25 פיקסלים ;

}

לאחר מכן, החל את מאפייני ה-CSS המפורטים להלן:

• ה ' מתווה מאפיין משמש להוספת קווי מתאר סביב האלמנט. לדוגמה, הערך שלו מוגדר כ' מוצק '.
• ' רוֹחַב ” מציין את גודל האלמנט בצורה אופקית.
• ' ריפוד 'משמש להקצאת החלל סביב תוכן האלמנט.
• ' שולים ” ציין את הרווח בצד החיצוני של גבול האלמנט.

שלב 5: הגדר את קווי המתאר של המיכל השני

כעת, גש לאלמנט השני בעזרת המחלקה המתאימה לו ' .box2-div ”:

.box2-div {

מתווה : מוצק ;

גבול-רדיוס : 20 פיקסלים ;

רוֹחַב : 300 פיקסלים ;

ריפוד : 15 פיקסלים ;

שולים : 25 פיקסלים ;

}

החל את מאפיין ה-CSS ' גבול-רדיוס ' להגדרת הרדיוס של האלמנט. מאפיין זה מאפשר לך להוסיף פינות מעוגלות מסביב לאלמנט:

ניתן לשים לב שהוספנו בהצלחה את אפקט רדיוס המתאר על אלמנט ה-HTML.

סיכום

ה ' רדיוס מתאר ' אינו זמין יותר. משתמשים יכולים להחיל את מאפייני רדיוס המתאר בעזרת מאפייני 'מתאר' ו-'רדיוס-גבול' של CSS. ה ' מתווה ' מוסיף קו מתאר סביב האלמנט, וה-' גבול-רדיוס משמש במיוחד לעיצוב קווי המתאר. פוסט זה הדגים את ההוראות להוספת אפקט רדיוס המתאר סביב האלמנט ב-HTML.