Δημιουργία περιγραμμάτων στο CSS. Περιουσία στα σύνορα. Δημιουργία περιγραμμάτων με διπλό περίγραμμα CSS css

Το Border-image είναι μια ιδιότητα που σας επιτρέπει να ορίσετε μια εικόνα φόντου για το περίγραμμα ενός στοιχείου. Η ιδιότητα γεμίζει το πλαίσιο με την καθορισμένη εικόνα, κατανέμοντας μέρη της εικόνας έτσι ώστε οι γωνίες να βρίσκονται στις γωνίες του πλαισίου και τα κενά μεταξύ τους να γεμίζουν με την υπόλοιπη εικόνα.

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

Ενημέρωση:Εργασία στον Firefox από την έκδοση 29.

Το μέγεθος της εικόνας είναι ίσο με το πάχος του πλαισίου. Το χρώμα και το στυλ του περιγράμματος αγνοούνται.

Εάν ορίσετε μόνο border-image-source, η εικόνα γεμίζει τις γωνίες, χωρίς να ξέρετε τι να κάνετε στη συνέχεια:

Περίγραμμα: 80px συμπαγές διαφανές. border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Σύνορα-εικόνα-φέτα

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

Πιθανές τιμές:

<проценты>- υπολογίζονται σε σχέση με το μέγεθος της εικόνας. Οριζόντια σε σχέση με το πλάτος, κάθετη - σε σχέση με το ύψος.<числа>- εικονοστοιχεία (για bitmap) ή συντεταγμένες (για διάνυσμα). Οι μονάδες μέτρησης δεν καθορίζονται. γεμίζω - λέξη-κλειδίσυμπληρώνοντας τις προηγούμενες τιμές. Εάν έχει καθοριστεί, η εικόνα δεν περικόπτεται με την εσωτερική άκρη του πλαισίου, αλλά γεμίζει και την περιοχή μέσα στο πλαίσιο. Πολύ χρήσιμο για στρογγυλεμένα κουφώματα.

Πολλαπλές τιμές μπορούν να διαχωριστούν με κενά για να οριστούν τιμές για κάθε πλευρά.

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

Περίγραμμα: 80px συμπαγές διαφανές. border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); περίγραμμα-εικόνα-φέτα: 100;

Σύνορο-εικόνα-επανάληψη

Η ιδιότητα καθορίζει πώς θα καλυφθούν τα κενά μεταξύ των γωνιών.

Πιθανές τιμές: τέντωμα - τεντώνει την περιοχή πλήρωσης της εικόνας. Προεπιλεγμένη τιμή; επανάληψη - επαναλαμβάνει το τμήμα πλήρωσης, ενώ οι αρμοί με τη γωνιακή εικόνα είναι ορατές. στρογγυλό - γεμίζει το κενό μεταξύ των γωνιών. Μπορεί να είναι ορατή μια ραφή στη μέση της πλευράς. Η πιο ακριβής ενέργεια. space - Λειτουργεί σαν επανάληψη. Δεν βρήκα διαφορά.

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

Border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); περίγραμμα-εικόνα-φέτα: 100; σύνορα-εικόνα-επανάληψη: επανάληψη;

Στα αριστερά είναι η επανάληψη, στα δεξιά είναι στρογγυλή.

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

Περίγραμμα-εικόνα-πλάτος

περίγραμμα-εικόνα-πλάτος

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

Πιθανές τιμές:<длина>- τιμές σε px ή em.<%>- τιμές σε ποσοστό σε σχέση με το μέγεθος της εικόνας.<числа>- μια αριθμητική τιμή με την οποία πολλαπλασιάζεται το αυτόματο πλάτος περιγράμματος - μια λέξη-κλειδί. Εάν καθορίζεται, η τιμή είναι ίση με το αντίστοιχο περίγραμμα-εικόνα-φέτα. Εάν δεν υπάρχει κατάλληλο μέγεθος, χρησιμοποιείται η τιμή πλάτους περιγράμματος και η εικόνα γεμίζει ολόκληρη τη γωνία του περιγράμματος, σέρνοντας κάτω από το περιεχόμενο. Λειτουργεί λίγο περίεργα.

Περίγραμμα: 60px συμπαγές διαφανές. border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); περίγραμμα-εικόνα-φέτα: 80; περίγραμμα-εικόνα-επανάληψη: στρογγυλή; περίγραμμα-εικόνα-πλάτος: 160 εικονοστοιχεία;

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

Σύνορα-εικόνα-αρχή

Μια ενδιαφέρουσα ιδιότητα που σας επιτρέπει να μετακινήσετε το πλαίσιο έξω από το στοιχείο. Οι αρνητικές τιμές δεν υποστηρίζονται.

Πιθανές τιμές:<длина>- τιμές σε px ή em.<числа>είναι η αριθμητική τιμή με την οποία πολλαπλασιάζεται το περίγραμμα-πλάτος.

Περίγραμμα: 60px συμπαγές διαφανές. border-image: url ("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); περίγραμμα-εικόνα-φέτα: 120; περίγραμμα-εικόνα-επανάληψη: στρογγυλό; border-image-outset: 60px 10px 50px 120px;

Στα δεξιά είναι ένα παράδειγμα με border-image-outset. Αυτή η ιδιότητα δεν επηρεάζει τις διαστάσεις του στοιχείου και το περίγραμμα μπορεί να επικαλύπτει γειτονικά στοιχεία.

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

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

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

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

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

Περίγραμμα στοιχείου με διπλή γραμμή

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

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

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

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

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

Εκμάθηση / CSS /

Μάθημα 7. Πλαισιώστε ένα στοιχείο CSS

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

σύνορο

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

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

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

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

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

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

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

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

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

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

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

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

περίγραμμα

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

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

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

Ευχαριστώ για την προσοχή!

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

Τα όρια του στοιχείου.

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

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

σύνορο

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

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Περιγραφή

Η ιδιότητα 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 !!!
Το στυλ μπορεί να ελεγχθεί από κάθε πλευρά ξεχωριστά:
σύνορα-τοπ-στυλεπάνω στυλ περιγράμματος?
σύνορο-δεξιό στυλδεξιό στυλ περιγράμματος.
σύνορα-κάτω-στυλστυλ κάτω περιγράμματος?
σύνορο-αριστερό στυλτο στυλ του περιγράμματος στην αριστερή πλευρά.
Τώρα ας δούμε τις τιμές στυλ:
1)σύνορα: κανένα- Αυτή είναι η προεπιλογή, παρόμοια με το πλάτος περιγράμματος: 0.
2)σύνορα: κρυφό- Το ίδιο, εκτός από τους πίνακες, τους οποίους θα δούμε αργότερα.
3)σύνορα: διακεκομμένη- Διακεκομμένο περίγραμμα.
4)σύνορο: διακεκομμένο- Περίγραμμα με διακεκομμένη γραμμή.
5)σύνορο: συμπαγές- Περίγραμμα συμπαγούς γραμμής, π.χ. όπως στην HTML.
6)σύνορα: διπλό- Διπλό περίγραμμα συμπαγούς γραμμής, εδώ χρειάζεστε ένα πλάτος περιγράμματος τουλάχιστον 3 pixel.
7)σύνορο: αυλάκι- Το περίγραμμα μοιάζει σαν να ήταν κομμένο στον καμβά.
8)σύνορο: κορυφογραμμή- Το περίγραμμα μοιάζει σαν να προεξέχει από τον καμβά.
9)στιλ περιγράμματος: ένθετο- Ολόκληρο το κουτί μοιάζει σαν να είναι πιεσμένο στον καμβά.
10)σύνορα: αρχή- Αντίθετα από το προηγούμενο.
Ορισμένα προγράμματα περιήγησης ενδέχεται να αγνοούν τις τιμές: διακεκομμένη, διακεκομμένη, διπλή, αυλάκωση, κορυφογραμμή, εισαγωγή και αρχή και να τις εξάγουν ως συμπαγείς, π.χ. το συνηθισμένο σύνορο.

Όλα αυτά φυσικά είναι έτσι, αλλά όλα τα παραπάνω παραδείγματα είναι μόνο μια αρχή λειτουργίας, όχι ένας μηχανισμός.
Ιδιότητα κανόνα σύνορουπονοεί (περίγραμμα: χρώμα στυλ μεγέθους;), αυτός ο κανόνας εκτελείται εάν υπάρχουν και οι τρεις τιμές και μόνο με αυτήν τη σειρά, για παράδειγμα H1 (περίγραμμα: 5 εικονοστοιχεία διπλό κόκκινο;), αλλά μπορεί να υπάρχουν εξαιρέσεις εάν αυτές οι τιμές παρέχονται από γλώσσες σήμανσης, για παράδειγμα, για έναν πίνακα ΠΙΝΑΚΑΣ (περίγραμμα: 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

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

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

Οι αξίες

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

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

Σύνταξη

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

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

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

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

Βλαντ Μέρζεβιτς

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

Περιγραφή ιδιοκτησίας

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

• σχεδιάζεται περίγραμμα γύρω από το στοιχείο (το περίγραμμα είναι μέσα).
• το περίγραμμα δεν επηρεάζει τις διαστάσεις του στοιχείου (το περίγραμμα προστίθεται στο πλάτος και το ύψος του στοιχείου).
• Το περίγραμμα μπορεί να οριστεί μόνο γύρω από ολόκληρο το στοιχείο, αλλά όχι σε μεμονωμένες πλευρές (το περίγραμμα μπορεί να χρησιμοποιηθεί για οποιαδήποτε πλευρά ή για όλα ταυτόχρονα).
• το περίγραμμα δεν επηρεάζεται από την ακτίνα στρογγυλοποίησης που ορίζεται από την ιδιότητα border-radius (επηρεάζεται το περίγραμμα).

Τίθεται το ερώτημα - σε ποιες περιπτώσεις χρειάζεται περίγραμμα, όταν ο ρόλος του, παρά τις παρατιθέμενες διαφορές, αναλαμβάνεται πλήρως κατά σύνορα; Δεν υπάρχουν τόσες πολλές καταστάσεις, αλλά συμβαίνουν:

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

Πολύχρωμες κορνίζες

Πρέπει να καταλάβετε ότι το περίγραμμα δεν αντικαθιστά με κανέναν τρόπο το περίγραμμα και μπορεί κάλλιστα να υπάρχει μαζί του, όπως φαίνεται στο παράδειγμα 1.

Παράδειγμα 1. Δημιουργία πλαισίου

Σε αυτό το παράδειγμα, προστίθεται ένα μαύρο περίγραμμα γύρω από το στοιχείο, το οποίο διαχωρίζεται από το φόντο με ένα λευκό περίγραμμα (Εικ. 1).

Ρύζι. 1. Πλαίσιο γύρω από το στοιχείο

Πλαίσιο κατά τη χρήση: τοποθετήστε το δείκτη του ποντικιού

Η προσθήκη περιγράμματος μέσω περιγράμματος αυξάνει το πλάτος του στοιχείου, το οποίο είναι αρκετά αισθητό όταν συνδυάζουμε το περίγραμμα και την ψευδο-κλάση: hover. Υπάρχουν δύο τρόποι για να "κερδίσετε" αυτό. Το πιο απλό πράγμα είναι να αντικαταστήσουμε το περίγραμμα με περίγραμμα, το οποίο γνωρίζουμε ότι δεν επηρεάζει τις διαστάσεις του στοιχείου (παράδειγμα 2).

Παράδειγμα 2. Πλαίσιο σε αιώρηση

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

Παράδειγμα 3. Πλαίσιο σε αιώρηση

Περίγραμμα γύρω από πεδία φόρμας

Σε ορισμένα προγράμματα περιήγησης (Chrome, Safari, πρόσφατες εκδόσεις του Opera), εμφανίζεται ένα μικρό έγχρωμο περίγραμμα γύρω από τα πεδία φόρμας όταν λαμβάνουν εστίαση (Εικόνα 2). Για να το αφαιρέσετε, απλώς προσθέστε την τιμή none στην ιδιότητα περίγραμμα σε στυλ, όπως φαίνεται στο παράδειγμα 4.

Ρύζι. 2. Πλαίσιο γύρω από τα πεδία

Παράδειγμα 4. Αφαίρεση του πλαισίου

Κορνίζες μέσω κουτιού-σκιάς

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

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

Το Παράδειγμα 4 δείχνει πώς να προσθέσετε δύο περιγράμματα και ένα περίγραμμα στα δεξιά χρησιμοποιώντας μία ιδιότητα box-shadow.

Παράδειγμα 4. Χρήση κουτιού-σκιάς

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 3.

Ρύζι. 3. Πλαίσια που δημιουργούνται από την ιδιότητα box-shadow

Μία από τις διασκεδαστικές εφαρμογές της ιδιότητας box-shadow CSS3 είναι η δημιουργία διπλού περιγράμματος γύρω από ένα στοιχείο. Ένα πολύ ενδιαφέρον εφέ για τη διακόσμηση σελίδας, αλλά θα λειτουργεί μόνο σε νεότερες εκδόσεις προγραμμάτων περιήγησης που υποστηρίζουν box-shadow.

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

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

Μέθοδος 1: περίγραμμα και περίγραμμα

Αυτή η μέθοδος λειτουργεί μόνο σε προγράμματα περιήγησης που υποστηρίζουν την ιδιότητα περίγραμμα (όλα εκτός από το IE6 / 7). Προσθέτετε ιδιότητες περιγράμματος και περιγράμματος στο στοιχείο.

Ένα (περίγραμμα: συμπαγές 6px #fff; περίγραμμα: συμπαγές 6px # 888;)

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

Μέθοδος 2: ψευδοστοιχείο

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

Δύο (περίγραμμα: συμπαγές 6 px #fff; θέση: σχετικό; δείκτης z: 1;) .δύο: πριν (περιεχόμενο: ""; εμφάνιση: μπλοκ; θέση: απόλυτη; επάνω: -12 px; αριστερά: -12 px; περίγραμμα: συμπαγές 6 εικονοστοιχεία # 888, πλάτος: 312 εικονοστοιχεία, κάτω μέρος: 12 εικονοστοιχεία, ελάχιστο ύψος: 100%, δείκτης z: 10;)

Τα βασικά σημεία είναι ο ορισμός της ιδιότητας z-index (έτσι ώστε το ψευδοστοιχείο να επικαλύπτει το περιεχόμενο), η τοποθέτηση και η τιμή ελάχιστου ύψους. Η τελευταία ιδιότητα διατηρεί την ελαστικότητα του πλαισίου.

Μέθοδος 3: σκιά

Η καλύτερη μέθοδος, καθώς απαιτεί μόνο μία γραμμή κώδικα με τις ρυθμίσεις ιδιοτήτων box-shadow.

Τρία (πλαίσιο-σκιά: 0 0 0 6 px #fff, 0 0 0 12 px # 888;)

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

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

Φυσικά, η υποστήριξη για την ιδιότητα box-shadow περιορίζεται σε νεότερα προγράμματα περιήγησης.

Μέθοδος 4: το επιπλέον στοιχείο div

Αυτή η μέθοδος χρησιμοποιεί ένα εξωτερικό στοιχείο