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

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

Για να προσθέσετε ένα διπλό περίγραμμα σε οποιοδήποτε σχήμα χρησιμοποιώντας CSS, το ' :πριν 'Ο επιλογέας είναι διάσημος. Αλλάζει τα χρώματα και των δύο περιγραμμάτων για να τα κάνει μοναδικά. Η διαδικασία βήμα προς βήμα που παρέχεται παρακάτω για να προσθέσετε ένα διπλό περίγραμμα με διαφορετικά χρώματα:

Βήμα 1: Προσθήκη στοιχείου Div και εκχώρηση τάξεων

Στο αρχείο HTML, προσθέστε το στοιχείο div μέσα στην ετικέτα και αντιστοιχίστε ένα ' τάξη 'με το όνομα ' διπλά σύνορα '. Οι χρήστες μπορούν επίσης να δημιουργήσουν το δικό τους όνομα τάξης:

Βήμα 2: Δημιουργία ετικέτας στυλ

Σε αυτό το βήμα, δημιουργήστε ένα τμήμα για την τάξη ' διπλά σύνορα ' και κάντε το ένα αντίγραφο με το ' :πριν ” επιλογέας. Με αυτόν τον τρόπο, οι ιδιότητες CSS θα εφαρμοστούν στις κλάσεις μας:

Βήμα 3: Προσθήκη στυλ στην τάξη

Οι ιδιότητες CSS ισχύουν για το στοιχείο div που έχει μια κλάση ' διπλά σύνορα '. Τα παρακάτω στυλ αναφέρονται παρακάτω:

Η περιγραφή των ιδιοτήτων CSS δίνεται παρακάτω:

• Πρώτα, προσθέστε ' χρώμα του φόντου 'που είναι γκρι και το ' σύνορο ” με βάρος 4px και πράσινο χρώμα.
• Ο ' υλικό παραγεμίσματος ” των 50 px για να δημιουργήσετε τον εσωτερικό χώρο των 50 px από όλες τις πλευρές.
• Στο τέλος, το « πλάτος ' και ' ύψος' των 16 εικονοστοιχείων. Επίσης το ' περιθώριο ” είναι 0 auto που σημαίνει ότι τα πάνω και κάτω περιθώρια θα είναι μηδέν και αριστερά.

Η ιστοσελίδα μοιάζει με αυτό:

Η έξοδος δείχνει ότι το περίγραμμα εφαρμόζεται στο 'div'.

Βήμα 4: Προσθήκη επιλογέα CSS

Τώρα, μετακινηθείτε προς το δεύτερο πλαίσιο στην ετικέτα στυλ που έχει το ' :πριν ” επισυνάπτεται ο επιλογέας και γράψτε τον παρακάτω κώδικα:

Οι ιδιότητες εξηγούνται παρακάτω:

• Χρησιμοποιήστε το ' θέση ” ιδιότητα για να γίνει σταθερή η θέση ενός στοιχείου.
• Μετά από αυτό, το « πάνω, αριστερά, δεξιά και κάτω ” ορίζει το περιθώριο του νεοδημιουργημένου στοιχείου από το αρχικό.
• Ένας επιλογέας CSS κάλεσε ': πριν ” προσθέτει περιεχόμενο μπροστά από ένα επιλεγμένο στοιχείο.

Η έξοδος μοιάζει με αυτό:

Έτσι μπορεί να προστεθεί διπλό περίγραμμα χρησιμοποιώντας διαφορετικά χρώματα.

συμπέρασμα

Για να προσθέσετε ένα διπλό περίγραμμα, δημιουργήστε πρώτα ένα στοιχείο div και αντιστοιχίστε το σε μια κλάση. Στη συνέχεια, προσθέστε το CSS ' θέση ” ιδιότητα που πρέπει να οριστεί σε σχετική. Στη συνέχεια, προσθέστε τον Επιλογέα CSS “:before” σε αυτόν, ώστε οι χρήστες να μπορούν να προσθέσουν περιεχόμενο πριν από ένα επιλεγμένο στοιχείο. Αυτός ο οδηγός έχει δείξει τη χρήση διπλών περιγραμμάτων με διάφορα χρώματα.