Αυτό το ιστολόγιο θα συζητήσει:

• Τι είναι το Outline Radius;
• Πώς να εφαρμόσετε το εφέ ακτίνας περίγραμμα στο στοιχείο HTML;

Τι είναι η ακτίνα περιγράμματος;

Ο ' περίγραμμα Η ιδιότητα ' χρησιμοποιείται για να διαμορφώσει το περίγραμμα του στοιχείου, αλλά δεν μπορεί να εφαρμοστεί άμεσα. Επομένως, η εναλλακτική μέθοδος για την εφαρμογή του φαινομένου ακτίνας σε ένα περίγραμμα είναι η χρήση ενός ' σύνορα-ακτίνα ” Ιδιότητα CSS. Καθορίζει τις στρογγυλεμένες γωνίες για περιγράμματα.

Πώς να εφαρμόσετε το εφέ ακτίνας περίγραμμα στο στοιχείο HTML;

Για να χρησιμοποιήσετε την ιδιότητα ακτίνα περιγράμματος, ακολουθήστε τις οδηγίες που δίνονται.

Βήμα 1: Ενσωμάτωση επικεφαλίδων

Αρχικά, ενσωματώστε τις επικεφαλίδες χρησιμοποιώντας οποιαδήποτε ετικέτα επικεφαλίδας από '

' προς την '

'. Για παράδειγμα, χρησιμοποιήσαμε το «

' και '

” ετικέτες για την ενσωμάτωση δύο διαφορετικών επικεφαλίδων σε ένα έγγραφο HTML.

Βήμα 2: Προσθέστε το First div Container

Μετά από αυτό, προσθέστε ένα δοχείο χρησιμοποιώντας το '

ετικέτα '. Επίσης, εισάγετε το ' τάξη ” χαρακτηρίστε και καθορίστε το όνομα για την κλάση σύμφωνα με την επιλογή σας.

---

---

Βήμα 3: Δημιουργήστε το δεύτερο κοντέινερ div

Δημιουργήστε ένα άλλο ' div ” κοντέινερ ακολουθώντας την ίδια διαδικασία:

< h1 στυλ = 'color:rgb(48, 10, 218)' > Linuxhint LTD UK < / 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 'outline' και 'border-radius'. Ο ' περίγραμμα ' προσθέτει ένα περίγραμμα γύρω από το στοιχείο και το ' σύνορα-ακτίνα ” χρησιμοποιείται ειδικά για το styling του περιγράμματος. Αυτή η ανάρτηση έχει δείξει τις οδηγίες για την προσθήκη του εφέ ακτίνας περιγράμματος γύρω από το στοιχείο σε HTML.