Ιδιοκτησία css – « σύνορο”, σας επιτρέπει να ορίσετε το πάχος, το χρώμα και τον τύπο της γραμμής γύρω από την περίμετρο γύρω από το στοιχείο. Οι παράμετροι αυτής της ιδιότητας μπορούν να γραφτούν σε μία γραμμή, διαχωρισμένες με κενά και με οποιαδήποτε σειρά.

• - Πάχος γραμμής ένα pixel
• - συμπαγής γραμμή
• - Ασπρο χρώμα
• - μαύρο χρώμα
• - γκρι χρώμα

Περίγραμμα συμπαγούς στοιχείου

διακεκομμένο περίγραμμα στοιχείου

Περίγραμμα με κουκκίδες

Διπλή γραμμή περιγράμματος στοιχείου

Περιουσία επιμέρους τμημάτων των συνόρων

Πιεσμένο κυματοειδές πλαίσιο σε όγκο

Κυρτό κυματοειδές πλαίσιο σε όγκο

Ογκομετρικό συμπιεσμένο πλαίσιο

Ογκομετρικό κυρτό πλαίσιο

Μαθήματα / CSS /

Μάθημα 7

Σχεδόν κάθε ιστότοπος χρησιμοποιεί μια ιδιότητα που δημιουργεί ένα περίγραμμα γύρω από ένα στοιχείο. Χρειάζεται είτε για κουμπιά είτε για μπλοκ με κείμενο. Για να δημιουργήσετε ένα περίγραμμα, ένα στοιχείο στο CSS έχει δύο ιδιότητες: περίγραμμα και περίγραμμα. Ας τα εξετάσουμε.

σύνορο

Αυτή η ιδιότητα απαιτείται για να ορίσετε ένα πλαίσιο γύρω από το στοιχείο, υποδεικνύει το περίγραμμά του στο έγγραφο web, το πλάτος του πλαισίου λαμβάνεται υπόψη κατά την τοποθέτηση του στοιχείου. Έχει 3 τιμές - χρώμα, πάχος και τύπο πλαισίου.

Η σύνταξη για την ιδιότητα περιγράμματος είναι η εξής:

περίγραμμα: Τύπος πλάτους Χρώμα.
Μπορείτε επίσης να επιλέξετε μια διαφορετική σειρά για τον καθορισμό των τιμών των ιδιοτήτων, αλλά το κύριο πράγμα είναι μέσα από ένα διάστημα.

Το πάχος (πλάτος) του πλαισίου πρέπει να προσδιορίζεται σε pixel (px) ή ποσοστά (%).
Το χρώμα μπορεί να ρυθμιστεί είτε μέσα Μορφή RGB(Κόκκινο Πράσινο Μπλε) ή σε κώδικα HTML HEX.

Παρακάτω είναι ΤΥΠΟΙ ΓΡΑΜΜΩΝμε τα ονόματά τους:

Πώς να ορίσετε όρια για ένα στοιχείο; Το κάνουμε ως εξής:

#ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ(
περίγραμμα: 3px στερεό #0085ss; /* ορίστε τη γραμμή σε 3 px παχύ μπλε */
}

Εάν θέλετε να εγκαταστήσετε ένα, δύο ή τρία πλαίσιο στη μία πλευρά, στη συνέχεια καθορίστε ως εξής:

κορυφή περιγράμματος- επάνω πλαίσιο
σύνορο-κάτω- κάτω πλαίσιο
σύνορα-αριστερά- πλαίσιο στα αριστερά.
σύνορα-δεξιά- πλαίσιο στα δεξιά.

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ (
περίγραμμα δεξιά: 3px στερεό #0085cc;
περίγραμμα-κάτω: 2px διακεκομμένη #0085cc;
}

Αν θέλεις αφαιρέστε τα πλαίσιαστοιχείο στο CSS και, στη συνέχεια, γράψτε στο περίγραμμα ιδιοτήτων - κανένα

αδειάζω(
σύνορο: κανένα /* το στοιχείο με την κλάση κενή δεν θα έχει περίγραμμα */
}

περίγραμμα

Το Outline είναι μια ιδιότητα που απαιτείται για να ορίσετε το εξωτερικό περίγραμμα ενός στοιχείου.

Υπάρχει δύο διαφορές από τα σύνορα:
Πρώτον, η γραμμή που καθορίζεται στο περίγραμμα ΔΕΝ θα επηρεάσει τη θέση του ίδιου του μπλοκ, το πλάτος και το ύψος του.
Δεύτερον, δεν υπάρχει δυνατότητα τοποθέτησης πλαισίου από μια συγκεκριμένη πλευρά.
Η σύνταξη είναι ίδια με το περίγραμμα.

περίγραμμα: 2 εικονοστοιχεία με κουκκίδες #0085cc; /* περίγραμμα 2 px μπλε διακεκομμένο */
Για περίγραμμα, καθώς και για περίγραμμα, μπορείτε να αφαιρέσετε τα περιγράμματα γράφοντας κανένα:

Σας ευχαριστώ για την προσοχή σας!

Προηγούμενο άρθρο
Μάθημα 6

Σύνορα στοιχείων.

Επένδυση και περιθώρια στο CSS. Τι είναι το περιθώριο και η επένδυση; Επόμενο άρθρο
Μάθημα 8. Πώς να ορίσετε το χρώμα κειμένου και το φόντο ενός στοιχείου στο CSS;

Σχόλια στο άρθρο (vk.com)

σύνορο

Υποστήριξη προγράμματος περιήγησης

Περιγραφή

Η ιδιότητα CSS σάς επιτρέπει να ορίσετε ταυτόχρονα το πλάτος, το στυλ και το χρώμα για το περίγραμμα του μπλοκ. Το περίγραμμα του μπλοκ είναι μια απλή γραμμή/πλαίσιο που περιβάλλει το μπλοκ από όλες τις πλευρές. Θα πρέπει να ληφθεί υπόψη ότι κατά την προσθήκη ενός πλαισίου, θα επηρεάσει το συνολικό μέγεθος του μπλοκ.

Οι τιμές διαχωρίζονται με ένα κενό και μπορούν να είναι με οποιαδήποτε σειρά, το πρόγραμμα περιήγησης θα καθορίσει ποια ταιριάζει με την επιθυμητή παράμετρο. Δεν είναι απαραίτητο να καθοριστούν και οι τρεις τιμές, το πλάτος ή/και το χρώμα μπορούν να παραλειφθούν, οπότε η τιμή που έχει οριστεί για την προεπιλεγμένη ιδιότητα θα χρησιμοποιηθεί αντί της τιμής που λείπει, π.χ. εάν για παράδειγμα δεν έχει καθοριστεί πλάτος, τότε θα χρησιμοποιηθεί η προεπιλεγμένη τιμή της ιδιότητας. Ο πίνακας κάτω από τη σύνταξη δείχνει τις τιμές των οποίων οι ιδιότητες μπορούν να χρησιμοποιηθούν.

Σημείωση: Για να ορίσετε περιθώρια μόνο σε ορισμένες πλευρές ενός στοιχείου, χρησιμοποιήστε τις ακόλουθες ιδιότητες: περίγραμμα-πάνω, περίγραμμα-κάτω, περίγραμμα-αριστερά, περίγραμμα-δεξιά.

Συμβουλή: Κατά κανόνα, όταν χρησιμοποιείτε περίγραμμα, πρέπει να προσθέσετε padding.

Ιδιότητα CSS: περίγραμμα

Προσθέτουν κενό διάστημα μεταξύ του περιγράμματος του μπλοκ και του περιεχομένου του: κείμενο, εικόνες ή θυγατρικές ετικέτες. Συνήθως το περίγραμμα εμφανίζεται κοντά στο περιεχόμενο του στοιχείου, αυτό είναι χρήσιμο μόνο εάν χρειάζεται να ορίσετε ένα περίγραμμα γύρω από την εικόνα.

Σύνταξη

περίγραμμα: περιγράμματος-πλάτους περιγράμματος-στυλ περιγράμματος-χρώμα|κληρονομιά;

Αξίες ακινήτων

Παράδειγμα

Υπάρχει κάποιο κείμενο εδώ.

Αποτέλεσμα αυτό το παράδειγμαστο παράθυρο του προγράμματος περιήγησης:

Πώς να ορίσετε το χρώμα, το στυλ και το μέγεθος του περιγράμματος στα πλαίσια.

Στις γλώσσες σήμανσης, το περίγραμμα( σύνορο), έχουν μόνο πίνακες, εικόνες και κορνίζες, σε ορισμένες περιπτώσεις είναι δυνατό να ορίσετε το χρώμα του περιγράμματος και τέλος.

χαρακτηριστικό περιγράμματος

Τα Cascading Style Sheets μας δίνουν περισσότερες επιλογές, αλλά πρώτα πρώτα.

Στο CSS, μπορούμε να ελέγξουμε το πλάτος του περιγράμματος (περιγράμματος) με πλάτος συνόρων, και για να είμαστε πιο ακριβείς, μπορούμε να ελέγξουμε το πάχος κάθε πλευράς ξεχωριστά:
περίγραμμα-πάνω-πλάτος- Πάχος άνω περιγράμματος
περίγραμμα-δεξιά-πλάτος- πάχος του δεξιού κράσπεδου
περίγραμμα-κάτω-πλάτος- Πάχος κάτω περιγράμματος
περίγραμμα-αριστερό-πλάτος- πάχος του αριστερού περιγράμματος
Αλλά μπορεί επίσης να συντομευτεί:
P (πλάτος περιγράμματος: επάνω δεξιά κάτω αριστερά;)(πάνω δεξιά κάτω αριστερά).
Το πλάτος του περιγράμματος μπορεί να οριστεί:
φιγούρες DIV (πλάτος περιγράμματος: 5 px), από το μηδέν έως το άπειρο, δηλ. θετικός.
λεπτός- λεπτό περίγραμμα, DIV (πλάτος περιγράμματος: λεπτό)
Μεσαίο- μεσαίο περίγραμμα, DIV (πλάτος περιγράμματος: μεσαίο)
πυκνός- παχύ περίγραμμα, DIV (πλάτος περιγράμματος: πάχος)
Είναι σαφές με τους αριθμούς, αλλά με αυτές τις τιμές όλα εξαρτώνται από το πρόγραμμα περιήγησης, αλλά ακόμα λεπτός<= medium <= thick .

Μπορούμε επίσης να ελέγξουμε το χρώμα του περιγράμματος με χρώμα πλαισίουή για την ακρίβεια το χρώμα κάθε πλευράς:
περίγραμμα-πάνω-χρώμαχρώμα του επάνω περιγράμματος
περίγραμμα-δεξιά-χρώμαχρώμα του δεξιού περιγράμματος.
περίγραμμα-κάτω-χρώμαχρώμα του κάτω περιγράμματος.
περίγραμμα-αριστερό-χρώμαχρώμα περιγράμματος στην αριστερή πλευρά.
Η τιμή χρώματος ορίζεται όπως για χρώμα, δηλ. ένα από τα 16 χρώματα: aqua, μαύρο, μπλε, φούξια, γκρι, πράσινο, λάιμ, καφέ, ναυτικό, ελιά, μωβ, κόκκινο, ασημί, γαλαζοπράσινο, λευκό ή κίτρινο, μπορείτε επίσης να ορίσετε χρώματα: χρώμα:#000000, χρώμα:#AF0 , χρώμα:rgb(255,0,0)ή χρώμα:rgb(100%, 0%, 0%).
Ανεξάρτητα από το συνδυασμό χρωμάτων που θα επιλέξετε, τα προγράμματα περιήγησης θα συνεχίσουν να το μεταφράζουν χρώμα:rgb(255,0,0). Για παράδειγμα χρώμα: ασβέστη = χρώμα:#00ff00 = χρώμα:#0F0 = χρώμα:rgb(0%, 100%, 0%), αλλά δεν έχει σημασία για το πρόγραμμα περιήγησης χρώμα:rgb(0,255,0), δηλ. θα υπολογίσει αυτή την τιμή.

Εάν το πάχος και το χρώμα του περιγράμματος μπορούν επίσης να ελεγχθούν από HTML, τότε το στυλ ( στυλ περιγράμματος) μόνο CSS!!!
Το στυλ μπορεί να ελεγχθεί από κάθε πλευρά ξεχωριστά:
σύνορα-top-styleεπάνω στυλ περιγράμματος?
σύνορο-δεξιό-στυλδεξιό στυλ περιγράμματος.
σύνορα-κάτω-στυλστυλ κάτω περιγράμματος?
σύνορο-αριστερό στυλστυλ περιγράμματος στην αριστερή πλευρά.
Τώρα εξετάστε τις αξίες των στυλ:
1)σύνορα: κανένα- Αυτή είναι η προεπιλεγμένη τιμή, παρόμοια με το περίγραμμα-πλάτος:0.
2)σύνορα: κρυφό- Το ίδιο, εκτός από πίνακες (πίνακας), που θα εξετάσουμε αργότερα.
3)στιλ περιγράμματος: διάστικτη- Ένα περίγραμμα από τελείες.
4)σύνορα: διακεκομμένη— Περίγραμμα από διακεκομμένη γραμμή.
5)σύνορο: συμπαγές- Περίγραμμα συμπαγούς γραμμής, π.χ. όπως στην HTML.
6)στιλ περιγράμματος: διπλό- Περίγραμμα διπλής συμπαγούς γραμμής, εδώ χρειάζεστε πάχος (πλάτος περιγράμματος) τουλάχιστον 3 pixel.
7)σύνορα: αυλάκι- Το περίγραμμα μοιάζει σαν να είναι κομμένο σε καμβά.
8)σύνορο: κορυφογραμμή— Το περίγραμμα μοιάζει σαν να προεξέχει από τον καμβά.
9)στιλ περιγράμματος: ένθετο- Ολόκληρο το κουτί μοιάζει σαν να πιέζεται στον καμβά.
10)σύνορα: outset- Το αντίθετο από το προηγούμενο.
Ορισμένα προγράμματα περιήγησης ενδέχεται να αγνοούν τις τιμές με διακεκομμένες, διακεκομμένες, διπλές, αυλακώσεις, κορυφογραμμές, ένθεση και έναρξη και να τις εξάγουν ως συμπαγείς, π.χ. συνηθισμένο σύνορο.

Όλα αυτά βέβαια είναι αλήθεια, αλλά όλα τα παραπάνω παραδείγματα είναι μόνο η αρχή λειτουργίας και όχι ένας μηχανισμός.
Ιδιότητα κανόνα σύνορουπονοεί (περίγραμμα: χρώμα στυλ μεγέθους;), αυτός ο κανόνας εκτελείται εάν υπάρχουν και οι τρεις τιμές και μόνο με αυτήν τη σειρά, για παράδειγμα H1 (περίγραμμα: 5 εικονοστοιχεία διπλό κόκκινο;), αλλά μπορεί να υπάρχουν εξαιρέσεις εάν αυτές οι τιμές παρέχονται από γλώσσες σήμανσης, για παράδειγμα, για έναν πίνακα TABLE (περίγραμμα: 2 εικονοστοιχεία), δηλ. δίνεται μόνο μία τιμή.

Για να διαχειριστείτε όχι ολόκληρο το κράσπεδο, αλλά κάθε τμήμα ξεχωριστά, υπάρχουν κανόνες:
(περιθώριο: χρώμα στυλ μεγέθους;)Έλεγχος άνω κράσπεδου.
(περιθώριο-δεξιά: χρώμα στυλ μεγέθους;)Χειριστήριο κράσπεδου στα δεξιά.
(περιθώριο-κάτω: χρώμα στυλ μεγέθους;)Χαμηλότερος έλεγχος κρασιού.
(περιθώριο-αριστερά: χρώμα στυλ μεγέθους ;)Έλεγχος κραδασμών στα αριστερά.
Αυτοί οι κανόνες μπορούν να χρησιμοποιηθούν μεμονωμένα ή όλοι μαζί.

Η εξαίρεση είναι αυτός ο κανόνας:
H1(
περίγραμμα: 4 εικονοστοιχεία σταθερό πράσινο.
}
Το θέμα είναι ότι στο CSS ο τελευταίος κανόνας έχει την υψηλότερη προτεραιότητα, σε αυτήν την περίπτωση η ιδιότητα του περιγράμματος περιέχει το border-left και επομένως ο κανόνας του border-left θα αγνοηθεί, ακριβώς ως εξής:
H1(
περίγραμμα: 4 εικονοστοιχεία σταθερό πράσινο.
περίγραμμα-αριστερά: 2px διπλό κόκκινο.
}
Πρώτα, ορίσαμε τους κανόνες για ολόκληρο το κράσπεδο και μετά για μεμονωμένες ενότητες.

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

css: περίγραμμα. Σύνορα στοιχείων.

CSS3 Borders

CSS3 Borders

Με το CSS3, μπορείτε να δημιουργήσετε στρογγυλεμένα περιγράμματα, να προσθέσετε σκιές σε κοντέινερ και να χρησιμοποιήσετε μια εικόνα ως περίγραμμα—χωρίς να χρειάζεστε ένα πρόγραμμα σχεδίασης όπως το Photoshop.

Σε αυτό το μάθημα, θα μάθετε για τις ακόλουθες ιδιότητες περιγράμματος:

• σύνορα-ακτίνα
• σκιά κουτιού
• εικόνα συνόρων

Υποστήριξη προγράμματος περιήγησης

Ο Internet Explorer 9 υποστηρίζει ορισμένες από τις νέες ιδιότητες περιγράμματος.

Ο Firefox απαιτεί το πρόθεμα -moz- για την εικόνα περιγράμματος.

Το Chrome και το Safari απαιτούν το πρόθεμα -webkit- για την εικόνα περιγράμματος.

Η Opera απαιτεί -o- για εικόνα συνόρων.

Το Safari απαιτεί επίσης το πρόθεμα -webkit- για box-shadow.

Η Opera υποστηρίζει νέες ιδιότητες περιγράμματος.

CSS3 στρογγυλεμένες γωνίες

Η προσθήκη στρογγυλεμένων γωνιών στο CSS2 ήταν δύσκολη. Έπρεπε να χρησιμοποιήσουμε διαφορετικές εικόνες για κάθε γωνία.

Στο CSS3, η δημιουργία στρογγυλεμένων γωνιών είναι εύκολη.

Στο CSS3, η ιδιότητα border-radius χρησιμοποιείται για τη δημιουργία στρογγυλεμένων γωνιών:

Αυτό το μπλοκ έχει στρογγυλεμένες γωνίες!

Σκιά κοντέινερ CSS3

Στο CSS3, η ιδιότητα box-shadow χρησιμοποιείται για την προσθήκη μιας σκιάς στα πλαίσια:

CSS3 Border-Image

Με την ιδιότητα border-image CSS3, μπορείτε να χρησιμοποιήσετε μια εικόνα για να δημιουργήσετε ένα περίγραμμα:

Η ιδιότητα border-image σάς επιτρέπει να καθορίσετε ένα περίγραμμα εικόνας!

Η αρχική εικόνα που χρησιμοποιήθηκε για τη δημιουργία του περιγράμματος είναι δική σας:

New Border Properties

χαρακτηριστικό περιγράμματος

χαρακτηριστικό περιγράμματος, ετικέτα

Σύνορα HTML

Είναι αποδεκτό να χρησιμοποιείτε περίγραμμα χωρίς τιμές, τότε το πάχος του περιγράμματος θα είναι ίσο με ένα εικονοστοιχείο. Από προεπιλογή, το πλαίσιο εμφανίζεται με εφέ 3D, αλλά εάν εφαρμόσετε επιπλέον το χαρακτηριστικό φόντου, το πλαίσιο θα γίνει "επίπεδο".

Επιπλέον, εάν το χαρακτηριστικό border έχει μη μηδενική τιμή, τότε τα προγράμματα περιήγησης εμφανίζουν επίσης λεπτά περιγράμματα γύρω από τα ίδια τα κελιά. Η εμφάνιση αυτών των περιγραμμάτων μπορεί να ελεγχθεί χρησιμοποιώντας το χαρακτηριστικό κανόνες.

Αξίες

Η τιμή του χαρακτηριστικού μπορεί να είναι οποιοσδήποτε μη αρνητικός αριθμός που καθορίζει το μέγεθος σε pixel.

Προεπιλεγμένη τιμή: 0.

Σύνταξη

Απαιτούμενο χαρακτηριστικό: κανένα.

Παράδειγμα HTML: Εφαρμογή του χαρακτηριστικού Border

Παράδειγμα αποτελέσματος

Αποτέλεσμα. Εφαρμογή του χαρακτηριστικού περιγράμματος.

Μιχαήλ 2016-06-11 1 HTML και CSS 0

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

Γεια σε όλους. Ξέρεις πώς να φτιάξεις διπλό περίγραμμα σε css; Εάν όχι, διαβάστε αυτό το σύντομο σημείωμα. Το θέμα είναι ότι δεν μπορείς να το κάνεις αυτό με κανονικό περίγραμμα, πρέπει να πας από τον άλλο τρόπο.

Εάν ορίσετε ένα περίγραμμα με την ιδιότητα περιγράμματος, μπορείτε να ορίσετε μόνο ένα. Αλλά πολύ συχνά, το σχέδιο μπορεί να απαιτεί πολλά πλαίσια. Σε αυτή την περίπτωση, θα πρέπει να χρησιμοποιήσετε ένα ψευδο-πλαίσιο - μια σκιά.

Διπλό περίγραμμα με κουτί-σκιά

Γενικά, αν θέλετε να μελετήσετε τη σκιά σε css πιο αναλυτικά, τότε σας συμβουλεύω να διαβάσετε για το σχετικό θέμα. Σε αυτό το άρθρο, δεν θα εξηγήσω λεπτομερώς τη σύνταξη της ιδιότητας, αλλά απλώς θα σας δείξω πώς να δημιουργήσετε ένα διπλό περίγραμμα. Έτσι, θα δημιουργήσω ένα συνηθισμένο μπλοκ, στο οποίο θα συνταγογραφήσω μερικά στυλ. Το μπλοκ μπορεί να είναι οποιοδήποτε και με οποιοδήποτε περιεχόμενο. Στην περίπτωσή μου, αυτό είναι ένα απλό div, οπότε δεν θα δείξω καν τον κώδικα html. Και εδώ είναι τα στυλ:

Div(
φόντο: #E0D8A3;
πλάτος: 180 px
ύψος: 110 px;
padding: 12px
}

Λοιπόν, ένα τυπικό παράδειγμα σχεδιασμού μπλοκ.
Τώρα ας δημιουργήσουμε ένα διπλό περίγραμμα χρησιμοποιώντας πολλαπλές σκιές. Θα προσθέσω την ακόλουθη ιδιότητα στα στυλ μπλοκ:

Κουτί-σκιά: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Έτσι φαίνεται:

Όπως μπορείτε να δείτε, βγήκε πολύ ωραίο. Υπάρχουν μόνο 5 παράμετροι στο πλαίσιο-σκιά. Η πρώτη είναι η οριζόντια μετατόπιση της σκιάς, η δεύτερη είναι η κάθετη μετατόπιση. Η τρίτη και η τέταρτη παράμετρος είναι θαμπάδα και τέντωμα. Όπως καταλαβαίνετε, τα τρία πρώτα δεν τα αγγίζουμε καθόλου. Δεν χρειαζόμαστε μια θαμπάδα, γιατί χρειαζόμαστε μια έντονη σκιά. Όπως μπορείτε να δείτε, συνέταξα την τέταρτη παράμετρο - τέντωμα. Καθορίζει πόσο η σκιά θα είναι μεγαλύτερη από το στοιχείο στο οποίο είναι προσαρτημένο.

Από προεπιλογή, όλα μοιάζουν με αυτό - η σκιά έχει το ίδιο μέγεθος με το στοιχείο και βρίσκεται σαφώς κάτω από αυτό. Εάν αλλάξετε το τέντωμα, τότε η σκιά αρχίζει να προεξέχει πέρα ​​από το στοιχείο. Έτσι μπορείτε να δημιουργήσετε περιγράμματα, ακριβώς τα ίδια με την ιδιότητα περιγράμματος. Λοιπόν, με την πέμπτη παράμετρο, νομίζω ότι όλα είναι ξεκάθαρα - αυτό είναι το χρώμα της σκιάς.

Όπως μπορείτε να δείτε, απλά απαρίθμησα τις παραμέτρους για κάθε νέα σκιά, χωρισμένες με κόμματα. Νομίζω ότι έχετε ήδη μαντέψει ότι με τον ίδιο τρόπο μπορείτε να δημιουργήσετε ένα τριπλό περίγραμμα κ.λπ. Δεν υπάρχουν περιορισμοί εδώ. Ουσιαστικά, όσο για μένα, το θέμα έχει κλείσει και αν έχετε απορίες, μπορείτε να τις γράψετε στα σχόλια.

Ένα λεπτό της προσοχής σας:Όλοι θέλουμε να τοποθετήσουμε τους ιστότοπούς μας σε μια αξιόπιστη φιλοξενία. Έχω αναλύσει εκατοντάδες οικοδεσπότες και βρήκα τον καλύτερο - HostIQΥπάρχουν εκατοντάδες θετικές κριτικές σχετικά με αυτό στο δίκτυο, η μέση βαθμολογία χρηστών είναι 4,8 στα 5. Αφήστε τους ιστοτόπους σας να είναι καλοί.

Περιγραφή

Η καθολική ιδιότητα περιγράμματος σάς επιτρέπει να ορίσετε ταυτόχρονα το πλάτος, το στυλ και το χρώμα του περιγράμματος γύρω από ένα στοιχείο. Οι τιμές μπορούν να πάνε με οποιαδήποτε σειρά, χωρισμένες με κενό, το πρόγραμμα περιήγησης θα καθορίσει ποια αντιστοιχεί στην επιθυμητή ιδιότητα. Για να ορίσετε ένα περίγραμμα μόνο σε ορισμένες πλευρές ενός στοιχείου, χρησιμοποιήστε τις ιδιότητες border-top , border-bottom , border-left , border-right .

Σύνταξη

Αξίες

Η τιμή πλάτους περιγράμματος καθορίζει το πλάτος του περιγράμματος. Παρέχονται πολλές τιμές σε στυλ περιγράμματος για τον έλεγχο της εμφάνισής του. Τα ονόματά τους και το αποτέλεσμα της ενέργειας φαίνονται στο Σχ. ένας.

Εικ.1. Στυλ πλαισίων

border-color ορίζει το χρώμα του περιγράμματος, η τιμή μπορεί να είναι σε οποιαδήποτε έγκυρη μορφή CSS.

inherit κληρονομεί την αξία του γονέα.

HTML5 CSS2.1 IE Cr Op Sa Fx

Σε αυτό το παράδειγμα, προστίθεται ένα διπλό περίγραμμα γύρω από το επίπεδο. Το αποτέλεσμα φαίνεται στο σχ. 2.

Ρύζι. 2. Εφαρμογή της ιδιότητας συνόρων

Μοντέλο αντικειμένου

document.getElementById("elementID").style.border

Προγράμματα περιήγησης

Ο Internet Explorer μέχρι και την έκδοση 6 αποδίδει διακεκομμένες με πλάτος περιγράμματος 1 εικονοστοιχείο. Σε 2 εικονοστοιχεία και πάνω, η διακεκομμένη τιμή λειτουργεί σωστά. Αυτό το σφάλμα έχει διορθωθεί στον IE7, αλλά μόνο για όλα τα περιγράμματα 1 px. Εάν ένα από τα περιγράμματα του πλαισίου είναι 2 px ή παχύτερο, τότε η διακεκομμένη γίνεται στο IE7.

Ο Internet Explorer έως την έκδοση 7.0 δεν υποστηρίζει την τιμή κληρονομιάς.

Το στυλ του περιγράμματος μπορεί να διαφέρει ελαφρώς μεταξύ των προγραμμάτων περιήγησης όταν χρησιμοποιείτε τις τιμές groove , ridge , inset , ή outset .

Περιγραφή

Η καθολική ιδιότητα περιγράμματος σάς επιτρέπει να ορίσετε ταυτόχρονα το πλάτος, το στυλ και το χρώμα του περιγράμματος γύρω από ένα στοιχείο. Οι τιμές μπορούν να πάνε με οποιαδήποτε σειρά, χωρισμένες με κενό, το πρόγραμμα περιήγησης θα καθορίσει ποια αντιστοιχεί στην επιθυμητή ιδιότητα. Για να ορίσετε ένα περίγραμμα μόνο σε ορισμένες πλευρές ενός στοιχείου, χρησιμοποιήστε τις ιδιότητες border-top , border-bottom , border-left , border-right .

Σύνταξη

Αξίες

Η τιμή πλάτους περιγράμματος καθορίζει το πλάτος του περιγράμματος. Παρέχονται πολλές τιμές σε στυλ περιγράμματος για τον έλεγχο της εμφάνισής του. Τα ονόματά τους και το αποτέλεσμα της ενέργειας φαίνονται στο Σχ. ένας.

Εικ.1. Στυλ πλαισίων

border-color ορίζει το χρώμα του περιγράμματος, η τιμή μπορεί να είναι σε οποιαδήποτε έγκυρη μορφή CSS.

inherit κληρονομεί την αξία του γονέα.

HTML5 CSS2.1 IE Cr Op Sa Fx

Σε αυτό το παράδειγμα, προστίθεται ένα διπλό περίγραμμα γύρω από το επίπεδο. Το αποτέλεσμα φαίνεται στο σχ. 2.

Ρύζι. 2. Εφαρμογή της ιδιότητας συνόρων

Μοντέλο αντικειμένου

document.getElementById("elementID").style.border

Προγράμματα περιήγησης

Ο Internet Explorer μέχρι και την έκδοση 6 αποδίδει διακεκομμένες με πλάτος περιγράμματος 1 εικονοστοιχείο. Σε 2 εικονοστοιχεία και πάνω, η διακεκομμένη τιμή λειτουργεί σωστά. Αυτό το σφάλμα έχει διορθωθεί στον IE7, αλλά μόνο για όλα τα περιγράμματα 1 px. Εάν ένα από τα περιγράμματα του πλαισίου είναι 2 px ή παχύτερο, τότε η διακεκομμένη γίνεται στο IE7.

Ο Internet Explorer έως την έκδοση 7.0 δεν υποστηρίζει την τιμή κληρονομιάς.

Το στυλ του περιγράμματος μπορεί να διαφέρει ελαφρώς μεταξύ των προγραμμάτων περιήγησης όταν χρησιμοποιείτε τις τιμές groove , ridge , inset , ή outset .

Η γενική ιδιότητα περιγράμματος χρησιμοποιείται για τον έλεγχο του περιγράμματος ενός στοιχείου. Αυτή η ιδιότητα σάς επιτρέπει να ορίσετε το πλάτος, το στυλ και το χρώμα του περιγράμματος ενός στοιχείου σε μία μόνο δήλωση.

Αυτές οι τρεις ιδιότητες (πλάτος, στυλ και χρώμα του περιγράμματος) μπορούν να οριστούν σε μία μόνο δήλωση. Εδώ είναι ένα παράδειγμα:

Μπορείτε να καθορίσετε ένα στυλ περιγράμματος μόνο στη μία πλευρά ενός στοιχείου. Για να το κάνετε αυτό, χρησιμοποιήστε τις ιδιότητες περίγραμμα-πάνω (πάνω περίγραμμα), περίγραμμα-δεξιά (δεξιό περίγραμμα), περίγραμμα-κάτω (κάτω περίγραμμα), περίγραμμα-αριστερά (αριστερό περίγραμμα).

Σε αυτό το παράδειγμα, κάθε πλευρά του μπλοκ έχει το δικό της πάχος περιγράμματος, στυλ και χρώμα.

Σκεφτείτε να χρησιμοποιήσετε CSS για να δημιουργήσετε ένα σχήμα όπως αυτό:

Οι τιμές περιγράμματος - πάχος, στυλ και χρώμα - μπορούν να ρυθμιστούν ξεχωριστά χρησιμοποιώντας ειδικές ιδιότητες.

• border-style - το στυλ του περιγράμματος.
• περίγραμμα-πλάτος - το πλάτος του περιγράμματος.
• border-color - το χρώμα του περιγράμματος.

Ας εξετάσουμε κάθε μία από τις τιμές ξεχωριστά.

Το ακίνητο σε στιλ συνόρων. Στυλ συνόρων.

Η ιδιότητα στυλ περιγράμματος ορίζει το στυλ περιγράμματος. Στο CSS, σε αντίθεση με την HTML, το περίγραμμα ενός στοιχείου μπορεί να είναι κάτι περισσότερο από συμπαγές. Οι έγκυρες τιμές για το στυλ περιγράμματος είναι:

1. κανένα - χωρίς περίγραμμα (προεπιλογή).
2. συμπαγές - συμπαγές περίγραμμα.
3. διπλό - διπλό περίγραμμα.
4. διακεκομμένο - διάστικτο περίγραμμα.
5. διακεκομμένο - ένα περίγραμμα που αποτελείται από μια σειρά κουκκίδων.
6. κορυφογραμμή - σύνορο "ράχη".
7. αυλάκι - περίγραμμα «αυλάκι».
8. ένθετο - ένθετο περίγραμμα.
9. αρχή - εξωθημένο περίγραμμα.

Παραδείγματα για το πώς μοιάζουν.

χωρίς σύνορα (κανένα)

συμπαγές περίγραμμα (συμπαγές)

διπλό περίγραμμα (διπλό)

διακεκομμένο περίγραμμα (στιγμένο)

διακεκομμένο περίγραμμα (διακεκομμένο)

αυλάκι περίγραμμα (αυλάκι)

σύνορο κορυφογραμμής

εσοχή περιγράμματος (ένθετο)

εξωθημένο περίγραμμα (αρχή)

Παρεμπιπτόντως, εάν ορίσετε το χρώμα περιγράμματος σε μαύρο για το πλαίσιο κορυφογραμμής, θα έχετε το ακόλουθο αποτέλεσμα.

Ένα μπλοκ div με μαύρο περίγραμμα και στυλ κορυφογραμμής.

Το περίγραμμα φαίνεται σαν συμπαγές , αλλά αυτό συμβαίνει επειδή το στυλ κορυφογραμμής δημιουργείται προσθέτοντας ένα εφέ μαύρης σκιάς και το μαύρο εφέ στο μαύρο περίγραμμα δεν είναι ορατό.

Με τη βοήθεια της ιδιότητας τύπου περιγράμματος, το στυλ περιγράμματος μπορεί να οριστεί όχι μόνο για όλες τις πλευρές του μπλοκ. Είναι δυνατό να ορίσετε πολλές τιμές για την ίδια ιδιότητα στυλ περιγράμματος , ανάλογα με τον αριθμό των τιμών, το στυλ περιγράμματος θα εκχωρηθεί σε διαφορετικό αριθμό πλευρών του μπλοκ. Μπορείτε να ορίσετε μία, δύο, τρεις ή τέσσερις τιμές. Ας δούμε παραδείγματα για κάθε περίπτωση.

Μία τιμή (συμπαγής) - το στυλ περιγράμματος ορίζεται για όλες τις πλευρές του μπλοκ.

Δύο τιμές (συμπαγές διπλό) - η πρώτη τιμή ορίζει το στυλ για την επάνω και την κάτω πλευρά, η δεύτερη για την πλευρά.

Τρεις τιμές (συμπαγή διπλή διάστικτη) - η πρώτη τιμή για την επάνω πλευρά, η δεύτερη για τις πλευρές, η τρίτη για την κάτω πλευρά.

Τέσσερις τιμές (συμπαγή διπλή διακεκομμένη διακεκομμένη) - κάθε τιμή για τη μία πλευρά δεξιόστροφα από την κορυφή.

Η ιδιότητα πλάτους συνόρων. Πάχος περιγράμματος.

Η ιδιότητα border-width χρησιμοποιείται για τον ορισμό του πλάτους του περιγράμματος ενός στοιχείου. Το πάχος του περιγράμματος μπορεί να καθοριστεί σε οποιαδήποτε απόλυτη μονάδα μέτρησης, όπως pixel.

Όπως η ιδιότητα τύπου περιγράμματος, η ιδιότητα μπορεί επίσης να οριστεί σε μία έως τέσσερις τιμές. Εξετάστε παραδείγματα για κάθε περίπτωση.

Παράδειγμα κώδικα:

Υπάρχουν επίσης τιμές λέξεων-κλειδιών για την ιδιότητα πλάτους περιγράμματος. Υπάρχουν τρία συνολικά:

• λεπτό - λεπτό περίγραμμα?
• μεσαίο - μεσαίο πάχος?
• παχύ - χοντρό περίγραμμα?

Πάχος περιγράμματος: λεπτό.

Πάχος περιγράμματος: μέτριο.

Πάχος περιγράμματος: παχύ.

Η ιδιότητα χρώματος περιγράμματος. Χρώμα πλαισίου.

Η εγκατάσταση χρώματος περιγράμματος χρησιμοποιείται για τον έλεγχο του χρώματος του περιγράμματος. Τα χρώματα για αυτήν την ιδιότητα μπορούν να οριστούν χρησιμοποιώντας οποιαδήποτε από τις μεθόδους που περιγράφονται στο άρθρο Χρώματα στο CSS, και συγκεκριμένα:

• Ο δεκαεξαδικός συμβολισμός (#ff00aa ) του χρώματος.
• Η μορφή RGB είναι rgb(255,12,110) . Μορφή RGBA για CSS3.
• Μορφές HSL και HSLA για CSS3.
• Το όνομα του χρώματος, για παράδειγμα μαύρο (μαύρο). Για μια πλήρη λίστα ονομάτων χρωμάτων, ανατρέξτε στον πίνακα Ονόματα χρωμάτων CSS.

Η ιδιότητα χρώματος περιγράμματος μπορεί επίσης να έχει μία έως τέσσερις τιμές και να τις αντιμετωπίζει παρόμοια με τις προηγούμενες ιδιότητες.

Μία τιμή (κόκκινο).

Δύο τιμές (κόκκινο μαύρο).

Τρεις τιμές (κόκκινο μαύρο κίτρινο).

Τέσσερις τιμές (κόκκινο μαύρο κίτρινο μπλε).

Τώρα ας επιστρέψουμε στην εργασία που εκφράστηκε παραπάνω και ας σχεδιάσουμε ένα σχήμα:

Εδώ είναι ο κώδικας που σχεδιάζει ένα τέτοιο σχήμα, μόνο μεγαλύτερο:

Ρύθμιση τιμών για τις πλευρές ξεχωριστά

Όπως αναφέρθηκε παραπάνω, μπορείτε να καθορίσετε τιμές ιδιοτήτων περιγράμματος μόνο για τη μία πλευρά ενός μπλοκ. Για τους σκοπούς αυτούς, υπάρχουν ιδιότητες:

• border-top (επάνω περίγραμμα)
• περίγραμμα-δεξιά (δεξιό περίγραμμα)
• περίγραμμα-κάτω (κάτω περίγραμμα)
• περίγραμμα-αριστερά (αριστερό περίγραμμα)

Επιτρέψτε μου να σας υπενθυμίσω ότι για όλες τις ιδιότητες, προσδιορίζονται τρεις τιμές (πάχος, στυλ και χρώμα) με οποιαδήποτε σειρά. Αλλά υπάρχουν ιδιότητες που σας επιτρέπουν να ορίσετε το πάχος, το χρώμα και το στυλ για κάθε πλευρά ξεχωριστά. Η γραφή αυτών των ιδιοτήτων προκύπτει από τα παραπάνω.

Επιλογές επάνω περιγράμματος (border-top ).

• border-top-color - ορίζει το χρώμα του επάνω περιγράμματος ενός στοιχείου.
• border-top-width - ορίζει το πλάτος του επάνω περιγράμματος ενός στοιχείου.
• border-top-style - ορίζει το στυλ του επάνω περιγράμματος του στοιχείου.

Επιλογές δεξιού περιγράμματος (περίγραμμα-δεξιά ).

• περίγραμμα-δεξιά-χρώμα - ορίζει το χρώμα του δεξιού περιγράμματος του στοιχείου.
• border-right-width - ορίζει το πλάτος του δεξιού περιγράμματος του στοιχείου.
• border-right-style - ορίζει το στυλ του δεξιού περιγράμματος του στοιχείου.

Επιλογές κάτω περιγράμματος (περίγραμμα-κάτω ).

• border-bottom-color - ορίζει το χρώμα του κάτω περιγράμματος ενός στοιχείου.
• border-bottom-width - ορίζει το πλάτος του κάτω περιγράμματος ενός στοιχείου.
• border-bottom-style - ορίζει το στυλ του κάτω περιγράμματος ενός στοιχείου.

Επιλογές αριστερού περιγράμματος (περίγραμμα-αριστερά ).

• border-left-color - ορίζει το χρώμα του αριστερού περιγράμματος του στοιχείου.
• border-left-width - ορίζει το πλάτος του αριστερού περιγράμματος του στοιχείου.
• περίγραμμα-αριστερό-στυλ - ορίζει το στυλ του αριστερού περιγράμματος του στοιχείου.

Ένα παράδειγμα χρήσης αυτών των ιδιοτήτων:

Η ιδιότητα της ακτίνας συνόρων. Στρογγυλοποίηση των γωνιών του περιγράμματος.

Η ιδιότητα border-radius είναι για τη στρογγυλοποίηση των γωνιών των περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα εισήχθη στο CSS3 και λειτουργεί σωστά σε όλα τα σύγχρονα προγράμματα περιήγησης εκτός από τον Internet Explorer 8 (και παλαιότερες εκδόσεις).

Οι τιμές μπορούν να είναι οποιοσδήποτε αριθμός που χρησιμοποιείται στο CSS.

ακτίνα περιγράμματος ιδιοκτησίας: 15 εικονοστοιχεία.

Εάν το πλαίσιο μπλοκ δεν έχει οριστεί, τότε γίνεται στρογγυλοποίηση με το φόντο. Ακολουθεί ένα παράδειγμα στρογγυλοποίησης μπλοκ χωρίς περίγραμμα αλλά με χρώμα φόντου:

ακτίνα περιγράμματος ιδιοκτησίας: 15 εικονοστοιχεία.

Υπάρχουν ιδιότητες για τη στρογγυλοποίηση κάθε μεμονωμένης γωνίας ενός στοιχείου. Αυτό το παράδειγμα χρησιμοποιεί όλα αυτά:

περίγραμμα-πάνω-αριστερά-ακτίνα: 15px; περίγραμμα-πάνω-δεξιά-ακτίνα: 0; περίγραμμα-κάτω-δεξιά-ακτίνα: 15 εικονοστοιχεία; περίγραμμα-κάτω-αριστερά-ακτίνα: 0;

ακτίνα περιγράμματος ιδιοκτησίας: 15 εικονοστοιχεία.

Παρόλο που αυτός ο κωδικός μπορεί να γραφτεί σε μία δήλωση: border-radius : 15px 0 15px 0 . Το γεγονός είναι ότι για την ιδιότητα border-radius, μπορείτε να ορίσετε από μία έως τέσσερις τιμές. Ο παρακάτω πίνακας συνοψίζει τους κανόνες που διέπουν τέτοιες δηλώσεις.

Μελετώντας προσεκτικά αυτόν τον πίνακα, μπορείτε να καταλάβετε ότι η συντομότερη καταχώρηση για το επιθυμητό στυλ θα είναι: border-radius : 15px 0 . Υπάρχουν μόνο δύο τιμές.

Λίγη εξάσκηση

Σχεδιάστε ένα λεμόνι χρησιμοποιώντας CSS.

Εδώ είναι ο κώδικας για ένα τέτοιο μπλοκ:

Περιθώριο: 0 αυτόματο; /* Κεντράρετε το μπλοκ */ πλάτος: 200 px; ύψος: 200 px; φόντο: #F5F240; περίγραμμα: 1px στερεό #F0D900; περίγραμμα-ακτίνα: 10px 150px 30px 150px;

Έχουμε ήδη σχεδιάσει το σχήμα:

Τώρα ας αφήσουμε ένα τρίγωνο από αυτό:

Ο κωδικός του τριγώνου είναι:

Περιθώριο: 0 αυτόματο; /* Κεντράρετε το μπλοκ */ padding: 0px; πλάτος: 0px ύψος: 0; περίγραμμα: 30 px συμπαγές λευκό. περίγραμμα-κάτω-χρώμα: κόκκινο;