Χρήση ψευδών στοιχείων
Μπορείτε να τοποθετήσετε ένα ψευδο στοιχείο έτσι ώστε είτε πίσω από το στοιχείο, και μεγαλύτερο, κάνοντας ένα εφέ περιγράμματος με το δικό του φόντο ή μικρότερο και εσωτερικό (αλλά βεβαιωθείτε ότι το περιεχόμενο τοποθετείται στην κορυφή).
Το στοιχείο που χρειάζεται πολλαπλά σύνορα πρέπει να έχει το δικό του περίγραμμα και τη σχετική του θέση.
.borders ( position: relative; border: 5px solid #f00; )Το δευτερεύον περίγραμμα προστίθεται με ένα ψευδο στοιχείο. Ρυθμίζεται με απόλυτη τοποθέτηση και ένθετο με τιμές πάνω / αριστερά / κάτω / δεξιά. Αυτό θα έχει επίσης ένα περίγραμμα και διατηρείται κάτω από το περιεχόμενο (διατηρώντας, για παράδειγμα, δυνατότητα επιλογής κειμένου και δυνατότητα κλικ των συνδέσμων) δίνοντάς του μια αρνητική τιμή ευρετηρίου z. Προσοχή με αρνητικό δείκτη z, εάν αυτό βρίσκεται εντός ενός άλλου στοιχείου με το δικό του χρώμα φόντου, αυτό μπορεί να μην λειτουργεί.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Δείτε το στυλό gbgRqZ του Chris Coyier (@chriscoyier) στο CodePen.
Μπορείτε επίσης να κάνετε ένα τρίτο περίγραμμα χρησιμοποιώντας την :afterψευδοκλάση. Λάβετε υπόψη σας ότι ο Firefox 3 (προ 3.6) το βιδώνει υποστηρίζοντας :afterκαι :before, αλλά δεν τους επιτρέπει να είναι απόλυτα τοποθετημένοι (έτσι φαίνεται περίεργο).
Χρησιμοποιώντας περίγραμμα
Ενώ είναι λίγο πιο περιορισμένο από το περίγραμμα (περιβάλλεται ολόκληρο το στοιχείο ανεξάρτητα από το τι) το περίγραμμα είναι ένα επιπλέον ελεύθερο περίγραμμα.
.borders ( border: 5px solid blue; outline: 5px solid red; )Χρησιμοποιώντας box-shadow
Μπορείτε να χρησιμοποιήσετε το πλαίσιο σκιάς για να κάνετε ένα εφέ περιγράμματος, κάνοντας τη σκιά να αντισταθμιστεί και να έχετε 0 θαμπάδα. Επιπλέον, με τιμές διαχωρισμού κόμμα, μπορείτε να έχετε όσα "περιγράμματα" θέλετε:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Δείτε το Pen xbgreX του Chris Coyier (@chriscoyier) στο CodePen.
Χρησιμοποιώντας ένα κομμένο φόντο
Μπορείτε να κάνετε το φόντο ενός στοιχείου να σταματήσει πριν από την επένδυση. Με αυτόν τον τρόπο ένα κανονικό περίγραμμα στοιχείων μπορεί να μοιάζει με διπλό περίγραμμα κατά κάποιο τρόπο.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Σε μια είσοδο:
Δείτε το εφέ Pen Double border από τον Chris Coyier (@chriscoyier) στο CodePen.