Ο σκοπός αυτού του εγχειριδίου είναι να εξηγήσει πώς να δημιουργήσετε στρογγυλά γωνιακά περιγράμματα. Για αυτό, πρώτα, πρέπει να γνωρίζουμε για το « σύνορο ” ιδιοκτησία. Λοιπόν, ας ξεκινήσουμε!
Τι είναι η ιδιότητα 'border' στο CSS;
Για να δημιουργήσετε ένα περίγραμμα γύρω από ένα στοιχείο, πρέπει να χρησιμοποιήσετε το ' σύνορο ” ιδιοκτησία. Χρησιμοποιώντας αυτήν την ιδιότητα, μπορείτε να ορίσετε το ' στυλ », « χρώμα ', και ' πλάτος ” των συνόρων.
Σύνταξη
Η σύνταξη της ιδιότητας συνόρων δίνεται ως εξής:
σύνορο : χρώμα στυλ πλάτους
Ακολουθεί η περιγραφή των παραπάνω τιμών:
- πλάτος: Χρησιμοποιείται για να ορίσετε το πλάτος του περιγράμματος.
- στυλ: Χρησιμοποιείται για τον ορισμό του στυλ περιγράμματος, όπως διακεκομμένο, διακεκομμένο, συμπαγές ή διπλό.
- χρώμα: Καθορίζει το χρώμα του περιγράμματος.
Ακολουθεί ένα παράδειγμα στο οποίο εφαρμόζουμε το ' σύνορο ” ιδιοκτησία.
Πώς να δημιουργήσετε περίγραμμα χρησιμοποιώντας CSS;
Για να δημιουργήσετε ένα περίγραμμα, πρώτα προσθέστε ένα στοιχείο σε ένα αρχείο HTML. Για να γίνει αυτό, θα δημιουργήσουμε ένα
και
:
< σώμα >
< div τάξη = 'γωνία' >
< h1 > Υπόδειξη Linux < / h1 >
< Π > Στρογγυλές γωνίες σε CSS < / Π >
< / div >
< / σώμα >
Στη συνέχεια, θα μεταφερθούμε στην ενότητα CSS.
Εδώ, το « .γωνία Το ” χρησιμοποιείται για πρόσβαση στην κλάση που έχει εκχωρηθεί στο
.γωνία {
σύνορο : 4px στερεός rgb ( 248 , 6 , 107 ) ;
πλάτος : 250 px ;
ύψος : 150 εικονοστοιχεία ;
χρώμα του φόντου : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Αφού εφαρμόσετε τον παραπάνω κώδικα, μεταβείτε στο αρχείο HTML και εκτελέστε το. Θα δείτε το ακόλουθο αποτέλεσμα:
Τώρα, θα προχωρήσουμε στο επόμενο τμήμα, όπου θα δημιουργήσουμε το τετράγωνο περίγραμμα στο στρογγυλό γωνιακό περίγραμμα.
Πώς να κάνετε στρογγυλή γωνία χρησιμοποιώντας CSS;
Για να δημιουργήσετε ένα στρογγυλό γωνιακό περίγραμμα, το ' σύνορα-ακτίνα Χρησιμοποιείται η ιδιότητα, στην οποία μπορείτε να ορίσετε την ακτίνα της γωνίας σύμφωνα με τις προτιμήσεις σας.
Σύνταξη
Η σύνταξη της ιδιότητας border-radius δίνεται παρακάτω:
σύνορα-ακτίνα : αξίαΑς συνεχίσουμε το προηγούμενο παράδειγμα και ας ορίσουμε την ακτίνα περιγράμματος για να επιτύχουμε στρογγυλές γωνίες.
Παράδειγμα
Σε ' .γωνία ' κλάση του αρχείου CSS, ορίστε την τιμή ' σύνορα-ακτίνα 'περιουσία ως ' 30 εικονοστοιχεία ”:
σύνορα-ακτίνα : 30 εικονοστοιχεία ;Με την προσθήκη της παραπάνω γραμμής, θα λάβετε την ακόλουθη έξοδο:
Η έξοδος που δίνεται παραπάνω σημαίνει ότι τα περιγράμματα αλλάζουν με επιτυχία σε στρογγυλές γωνίες λόγω της ιδιότητας ακτίνας περιγράμματος.
συμπέρασμα
Σε CSS ' σύνορα-ακτίνα Η ιδιοκτησία χρησιμοποιείται για την αλλαγή της γωνίας των περιγραμμάτων. Το σχήμα της καμπύλης αλλάζει ανάλογα με τη δεδομένη τιμή της ακτίνας. Χρησιμοποιώντας την αναφερόμενη ιδιότητα, μπορείτε να ορίσετε την ακτίνα της γωνίας σύμφωνα με την επιλογή σας. Σε αυτό το άρθρο, εξηγήσαμε πώς να στρογγυλοποιούμε περιγράμματα γωνιών χρησιμοποιώντας την ιδιότητα border-radius με τη βοήθεια ενός παραδείγματος.