Οι προγραμματιστές μπορούν να εφαρμόσουν πολλές ιδιότητες CSS για να κάνουν τις ιστοσελίδες τους πιο ελκυστικές, όπως ' ύψος ' και ' πλάτος 'Ιδιότητες για τη ρύθμιση μεγέθους, ' στοίχιση κειμένου 'για προσαρμογή κειμένου, ' στιλ συνόρων ' και ' σύνορα-ακτίνα ” ιδιότητες για τη ρύθμιση του περιγράμματος γύρω από το στοιχείο. Επιπλέον, μπορείτε να προσθέσετε ένα περίγραμμα σύμφωνα με τις απαιτήσεις σας, όπως στη μία πλευρά του στοιχείου, μόνο για να κάνετε πιο ορατά τα πράγματα πίσω από τα αντικείμενα.
Αυτή η ανάρτηση θα δείξει:
Μέθοδος 1: Ρυθμίστε το περίγραμμα στη μία πλευρά
Στο CSS, οι χρήστες μπορούν να ορίσουν το περίγραμμα στη μία πλευρά του επιθυμητού στοιχείου. Για το σκοπό αυτό, το « σύνορα-αριστερά », « σύνορα-δεξιά », « σύνορα-κορυφή ' και ' σύνορο-κάτω Οι ιδιότητες ” χρησιμοποιούνται για την προσθήκη περιγραμμάτων στην αριστερή, δεξιά, πάνω ή κάτω πλευρά.
Σε αυτήν την ενότητα, θα ορίσουμε συγκεκριμένα το περίγραμμα στην αριστερή πλευρά του κοντέινερ. Για να το κάνετε αυτό, ακολουθήστε τις παρακάτω οδηγίες.
Βήμα 1: Δημιουργήστε ένα κοντέινερ div
Πρώτα, δημιουργήστε ένα κοντέινερ div με τη βοήθεια του ' Βήμα 2: Εισαγωγή Επικεφαλίδας Στη συνέχεια, χρησιμοποιήστε το «< h1> ετικέτα ” για να προσθέσετε μια επικεφαλίδα μέσα στο κοντέινερ div. Επιπλέον, μπορείτε επίσης να χρησιμοποιήσετε άλλες ετικέτες επικεφαλίδων σύμφωνα με την απαίτηση, όπως «< h1> » σε «< h6> ' ετικέτες: Τώρα, αποκτήστε πρόσβαση στο κοντέινερ div HTML και αποκτήστε πρόσβαση στο όνομα της κλάσης. Για να γίνει αυτό, ένας επιλογέας τάξης ' # ' χρησιμοποιείται με το όνομα της κλάσης. Βήμα 4: Εισαγάγετε περίγραμμα μόνο από τη μία πλευρά Αφού αποκτήσετε πρόσβαση στο κοντέινερ div, εφαρμόστε τις παρακάτω ιδιότητες CSS: Η εικόνα που προκύπτει δείχνει το περίγραμμα μόνο με τη μία πλευρά: Για να ορίσετε το περίγραμμα σε όλες τις πλευρές με διαφορετικά χρώματα, χρησιμοποιήστε τον παραπάνω κώδικα HTML. Στη συνέχεια, αποκτήστε πρόσβαση στο κοντέινερ div με τη βοήθεια του ονόματος αναγνωριστικού και του επιλογέα: Ως αποτέλεσμα, θα εφαρμοστεί το περίγραμμα με διαφορετικά στυλ σε κάθε πλευρά: Για να ορίσετε το περίγραμμα μόνο στη μία πλευρά, πρώτα δημιουργήστε ένα div χρησιμοποιώντας το '
< h1 > Σύνορα στη μία πλευρά h1 >
div >
Μπορεί να φανεί ότι το κοντέινερ δημιουργήθηκε με επιτυχία:
Βήμα 3: Πρόσβαση στο κοντέινερ div
περίγραμμα-αριστερά: 5px συμπαγές το κόκκινο ;
φόντο:rgb ( 56 , 239 , 245 ) ;
περιθώριο: 20 px 100 px;
πλάτος: 200 px; ύψος: 150 px
}
Εδώ:
Μέθοδος 2: Ορισμός περιγράμματος σε όλες τις πλευρές με διαφορετικά στυλ
περιθώριο: 80 px;
πλάτος περιγράμματος: 8 px 2 px 1 px 10 px;
ακτίνα περιγράμματος: 50 px;
στιλ περιγράμματος: ένθετο συμπαγές διπλό διάστικτο.
χρώμα περιγράμματος: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}
Στον παραπάνω κωδικό:
Σε αυτό το άρθρο, έχετε μάθει διαφορετικούς τρόπους για να ορίσετε το περίγραμμα CSS σε μία και πολλές πλευρές. συμπέρασμα