Τα περιγράμματα και τα περιγράμματα CSS είναι πολύτιμα εργαλεία για τους σχεδιαστές ιστοσελίδων που θέλουν να προσθέσουν αίσθηση σε έναν ιστότοπο. Είναι εύχρηστα όταν γνωρίζετε πώς λειτουργούν και είναι αρκετά ευέλικτα ώστε να καλύπτουν ένα ευρύ φάσμα αναγκών. Ας δούμε τα σύνορα CSS για να δούμε πού πρέπει να ξεκινήσετε.
Ποια είναι η διαφορά μεταξύ ενός περιγράμματος και ενός περιγράμματος στο CSS;
Τα περιγράμματα και τα περιγράμματα CSS αποτελούν δύο από τα εξωτερικά στρώματα του το μοντέλο κουτιού CSS, κάθεται μεταξύ συνόρων και περιθωρίων. Αν και αυτές οι ιδιότητες είναι παρόμοιες, έχουν διαφορετικές αξίες και σκοπούς.
Για ένα, τα περιγράμματα CSS βρίσκονται εκτός συνόρων. Αυτό σημαίνει ότι μπορούν να επικαλύπτονται με περιεχόμενο εκτός του στοιχείου στο οποίο τα εφαρμόζετε. Μαζί με αυτό, τα περιγράμματα CSS αλλάζουν τις διαστάσεις ενός στοιχείου, αλλά τα περιγράμματα όχι.
Εάν δυσκολεύεστε να απεικονίσετε στυλ περιγράμματος και περιγράμματος, μπορείτε να χρησιμοποιήσετε το δικό σας εργαλεία ανάπτυξης του προγράμματος περιήγησης για εντοπισμό σφαλμάτων τους.
CSS Border & Outline Shared Property Value
Παρά τις διαφορές τους, τα σύνορα και τα περιγράμματα CSS μοιράζονται ορισμένες από τις αξίες τους. Η συντομογραφία που χρησιμοποιείτε για το καθένα είναι επίσης πολύ παρόμοια.
Συντομογραφία CSS Border & Outline
Όπως και άλλες πολύπλοκες ιδιότητες CSS, τόσο τα περιγράμματα όσο και τα περιγράμματα διαθέτουν συντομογραφία. Και οι δύο αυτές ιδιότητες μοιράζονται την ίδια μορφή για τις επιλογές συντομογραφίας τους και μοιάζει με αυτό.
σύνορο: πλάτοςστυλχρώμα;
περίγραμμα: πλάτοςστυλχρώμα;Αυτό δημιουργεί κανόνες που μοιάζουν με αυτόν όταν βρίσκονται σε δράση. Φυσικά, ωστόσο, αυτή η συντομογραφία δεν καλύπτει όλες τις διαθέσιμες τιμές για αυτές τις ιδιότητες.
περίγραμμα: 10 εικονοστοιχεία συμπαγές μπλε.
περίγραμμα: 20 εικονοστοιχεία συμπαγές κόκκινο.Αυτοί οι συντομογραφικοί κανόνες περιγράμματος και περιγράμματος CSS καταλήγουν σε ένα λεπτό μπλε περίγραμμα με ένα παχύ κόκκινο περίγραμμα.
Όπως και άλλες συντομογραφικές ιδιότητες CSS, μπορείτε επίσης να χρησιμοποιήσετε μεμονωμένες ιδιότητες για να επιτύχετε τα ίδια αποτελέσματα.
Πλάτος περιγράμματος και πλάτος περιγράμματος CSS
Τα πλάτη περιγράμματος και περιγράμματος είναι προαιρετικές τιμές ιδιοτήτων CSS που ορίζουν το πάχος των περιγραμμάτων και των περιγραμμάτων που χρησιμοποιείτε. Η μορφή για αυτές τις ιδιότητες είναι η ίδια.
περίγραμμα-πλάτος: 20 εικονοστοιχεία;
πλάτος περιγράμματος: 10 px;Τα περιγράμματα επιτρέπουν να οριστούν μεμονωμένα πλάτη για κάθε πλευρά του στοιχείου, αλλά τα περιγράμματα όχι. Μπορείτε να διαβάσετε περισσότερα για αυτό στις ακόλουθες ενότητες.
CSS σε στυλ περιγράμματος και στυλ περιγράμματος
Τα περιγράμματα και τα περιγράμματα CSS διατίθενται σε διάφορα στυλ. Τα συμπαγή περιγράμματα είναι τα πιο συνηθισμένα, αλλά μπορείτε να γίνετε δημιουργικοί με τον τρόπο που χρησιμοποιείτε περιγράμματα και περιγράμματα.
στιλ περιγράμματος: συμπαγές;
στιλ περιγράμματος: διακεκομμένο.Μπορείτε να βρείτε μια πλήρη λίστα με τα διαφορετικά στυλ περιγράμματος και περιγράμματος CSS στο τέλος αυτού του άρθρου.
CSS περίγραμμα-χρώμα & περίγραμμα-χρώμα
Όπως και με άλλες ιδιότητες CSS που βασίζονται σε χρώμα, τα περιγράμματα και τα περιγράμματα δέχονται όλα τα νόμιμα χρώματα CSS. Αυτό περιλαμβάνει δεκαεξαδικούς κωδικούς, κωδικούς RGB, χρώματα στενογραφίας και άλλα.
χρώμα περιγράμματος: μπλε;
περίγραμμα-χρώμα: #ff0000;Μπορείτε επίσης να χρησιμοποιήσετε διαβαθμίσεις χρώματος όταν εργάζεστε με περιγράμματα και περιγράμματα CSS.
Τιμές ιδιοτήτων συνόρων CSS
Μαζί με τις κοινές αξίες ιδιοκτησίας τους, τα περιγράμματα και τα περιγράμματα έχουν επίσης μοναδικές αξίες προς εξερεύνηση. Τα περιγράμματα CSS έχουν δύο μοναδικές ιδιότητες που αξίζει να μάθετε.
Ακτίνα συνόρων CSS
Η προσθήκη μιας ακτίνας στο περίγραμμα ενός στοιχείου σας δίνει πολύ έλεγχο στο σχήμα του. Κάθε γωνία ενός στοιχείου μπορεί να έχει διαφορετική ακτίνα και αυτή η ιδιότητα μπορεί να οριστεί ακόμα και όταν το στυλ περιγράμματος έχει οριστεί σε κανένα.
ακτίνα περιγράμματος: 20 εικονοστοιχεία;Μπορείτε να ορίσετε μία μόνο τιμή για να αλλάξετε την ακτίνα όλων των γωνιών.
Μπορείτε επίσης να χωρίσετε τις γωνίες σε ομάδες πάνω αριστερά/κάτω δεξιά και πάνω δεξιά/κάτω αριστερά.
περίγραμμα-ακτίνα: 10px 20px;Αυτό διευκολύνει τη δημιουργία ενδιαφέροντων σχημάτων με τα στοιχεία HTML σας.
Τέλος, μπορείτε να ρυθμίσετε κάθε γωνία να έχει τη δική της ακτίνα.
περίγραμμα-ακτίνα: 10px 20px 30px 40px;Αυτές οι τιμές ισχύουν δεξιόστροφα ξεκινώντας από την επάνω αριστερή γωνία.
Ιδιότητες CSS Border Side
Σε αντίθεση με τα περιγράμματα, μπορείτε να ορίσετε κάθε πλευρά ενός περιγράμματος να έχει μια μοναδική τιμή για πολλές από τις ιδιότητές του. Αυτό καθιστά δυνατό να δώσετε σε κάθε πλευρά του στοιχείου σας διαφορετικό πλάτος.
περίγραμμα-αριστερό-πλάτος: 10px;
περίγραμμα-δεξιά-πλάτος: 20px;
περίγραμμα-πάνω-πλάτος: 30px;
περίγραμμα-κάτω-πλάτος: 40 εικονοστοιχεία;Μπορείτε επίσης να ορίσετε ανεξάρτητα στυλ περιγράμματος CSS για κάθε πλευρά ενός στοιχείου.
περίγραμμα-αριστερά-στυλ: συμπαγής;
περίγραμμα-δεξιά-στυλ: διακεκομμένη;
περίγραμμα-top-style: διακεκομμένη?
στιλ περιγράμματος-κάτω: διπλό;Και μπορείτε να αλλάξετε το χρώμα κάθε πλευράς αν θέλετε.
περίγραμμα-αριστερό-στυλ: μπλε;
περίγραμμα-δεξιά-στυλ: #ff0000;
στιλ περιγράμματος κορυφής: #00ff00;
περίγραμμα-κάτω-στυλ: rgb (0, 0, 255);Οι πλευρές των συνόρων CSS συνεργάζονται με την κανονική συντομογραφία για να συνδυάζονται έτσι.
περίγραμμα-αριστερά: 10 εικονοστοιχεία συμπαγές μπλε.
σύνορο-δεξιά: 20px διακεκομμένη #00ff00;
σύνορα: 30px διακεκομμένη #ff0000;
σύνορο-κάτω: 40px διπλόrgb(0, 0, 255);Τιμές ιδιοτήτων περίληψης CSS
Όπως τα περιγράμματα CSS, τα περιγράμματα έχουν μια μοναδική ιδιότητα. περίγραμμα-μετατόπιση.
CSS outline-offset
Η προσθήκη μιας μετατόπισης σε ένα περίγραμμα δημιουργεί ένα κενό μεταξύ του ίδιου και του κύριου στοιχείου. Αυτή η μετατόπιση πρέπει να είναι η ίδια για κάθε πλευρά του περιγράμματος και η ιδιότητα δέχεται μόνο μία τιμή.
outline-offset: 10px;Αυτός μπορεί να είναι ένας καλός τρόπος για να χρησιμοποιήσετε ένα τρίτο περίγραμμα για τα στοιχεία σας που ταιριάζει με το χρώμα του φόντου σας.
CSS Border & Outline Styles
Τόσο τα σύνορα όσο και τα περιγράμματα χρειάζονται ένα στυλ για να λειτουργήσουν. Υπάρχουν δέκα διαθέσιμα στυλ για να διαλέξετε, συμπεριλαμβανομένων των περιγραμμάτων που δεν εμφανίζονται καθόλου.
στιλ περιγράμματος: συμπαγές;
στιλ περιγράμματος: διακεκομμένο.
στιλ περιγράμματος: διακεκομμένη;
σύνορο στυλ: αυλάκι?
σύνορα: κορυφογραμμή;
στιλ συνόρων: διπλό;
στιλ περιγράμματος: ένθετο;
σύνορο στυλ: αρχή?
στιλ περιγράμματος: κρυφό;
σύνορα: κανένα;Τα περιγράμματα μοιράζονται τα ίδια στυλ με τα περιγράμματα, μόνο με το σύνολο στυλ περιγράμματος ως ιδιοκτησία.
Τρόπος χρήσης CSS Borders & Outlines
Τα περιγράμματα και τα περιγράμματα είναι εξαιρετικά εργαλεία σχεδιασμού για τους δημιουργούς ιστοτόπων. Μπορείτε να ορίσετε την εμφάνιση και την αίσθηση του ιστότοπού σας με αυτές τις ιδιότητες CSS, αλλά θα πρέπει να γίνετε δημιουργικοί.
