Εφέ CSS: στρογγυλοποίηση των γωνιών των στοιχείων

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

CSS στρογγυλοποίηση γωνίες

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

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

Κλασικές άμεσες κατασκευές

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

συνοριακή εικόνα

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

Γενικοί Κανόνες CSS

Τα φύλλα στυλ Cascading υποδηλώνουν την περιγραφή των στοιχείων ως εξής:

  • ιδιότητα: αξία.

Στην περίπτωση αυτή, η ιδιότητα είναι ένα συγκεκριμένο όνομα και η τιμή μπορεί να είναι είτε ένα όνομα είτε μια απαρίθμηση ονομάτων ή τιμών.

Όσον αφορά τα στοιχεία μπλοκ και την ανάγκη να γίνει στρογγυλοποίηση γωνιών μέσω του CSS, είναι λογικό να χρησιμοποιείται η ιδιότητα ακτίνας ακτίνας και οι τιμές της σε μορφή "38px" ή "8px 16px 24px 38px".

 html css

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

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

Κοινή χρήση κάποιων κανόνων

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

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

ακτίνα στρογγυλοποίησης

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

Χαρακτηριστικά του HTML, CSS από προγράμματα περιήγησης

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

φόντο: # FF7F00; / * φόντο * /

σύνορα: 1px # CCCCCC στερεά; / * πλαίσιο * /

-moz-ακτίνα-ακτίνα: 10px; / * CSS στρογγυλοποίηση γωνιών για Mozilla Firefox * /

-webkit-ακτίνα-ακτίνα: 10px; / * ... για το Chrome και το Safari * /

-khtml-ακτίνα-ακτίνα: 10px; / * ... Konquerer * /

ακτίνα-ακτίνα: 10px. / * CSS στρογγυλοποίηση γωνιών για όλους * / κλπ.

Ωστόσο, στις περισσότερες περιπτώσεις αρκεί να αναφερθεί ο τελευταίος κανόνας. Ο πλεονασμός πρέπει να χρησιμοποιείται μόνο όταν υπάρχει πραγματική ανάγκη γι 'αυτό.

βασική κατασκευή

Κλασικά και θαυμάσια τραπέζια

Παρά τα πολυάριθμα επιχειρήματα των οπαδών(tr, td) και τη χρήση ετικετών div και span ("υπέροχη" διάταξη), η αντικειμενική πρακτική προτιμά την επιλογή εύλογης ανάγκης.

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

Οι περισσότεροι ιστότοποι δημιουργούνται χρησιμοποιώντας το CMS(συστήματα διαχείρισης τοποθεσίας) και στη διάθεση του προγραμματιστή δεν υπάρχει μόνο ένα ευρύ φάσμα των "τεράστιων" συστοιχιών δεδομένων, εκατοντάδων φακέλων, αντικειμένων, αλλά και πινάκων.

Οι ετικέτες [div | span], ως τέτοιες, δεν επισημαίνονται, αλλάτο μόνο πράγμα που έρχεται ακριβώς στην πλήρη έλεος του έργου - ένα φύλλο στυλ CSS. Και κάθε CMS χωρίζει σαφώς τον κώδικα, μέρος της από τη δημιουργικότητα του κυρίου του έργου και το δικό τους στυλ της προστιθέμενης στυλ, και στην περίπτωση των αλλαγών (π.χ., CSS - η στρογγυλοποίηση των γωνιών του πίνακα), μπορείτε πάντα να επαναφέρετε τις ρυθμίσεις και τις προεπιλεγμένες μορφές.

Καμπύλες και γωνίες που δεν παρέχονται από τη σύνταξη

Γωνιακό τραπέζι στρογγυλοποίησης CSS

Μπορείτε να ακολουθήσετε αυστηρά όλους τους κανόνες HTML, CSS, αλλάέχουν ως αποτέλεσμα ότι δεν έχουν παράσχει. Με την επικάλυψη στοιχείων επάνω ο ένας στον άλλο, μπορείτε να πάρετε οποιουσδήποτε τομείς οποιασδήποτε διαμόρφωσης. Χρησιμοποιώντας τον προγραμματισμό PHP στο διακομιστή, μπορείτε να στείλετε αρχεία στυλ στο πρόγραμμα περιήγησης του επισκέπτη και να επισυνάψετε τον κατάλληλο κώδικα JavaScript σε αυτά στο σώμα του αρχείου HTML ή σε ξεχωριστό αρχείο js.

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

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

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

Αρέσει:
0
Τύποι τριγώνων, γωνιών και πλευρών
Το άθροισμα των γωνιών του τριγώνου. Το θεώρημα για το άθροισμα
Κάθετες και γειτονικές γωνίες
Ο διχοτόμος του τριγώνου και οι ιδιότητές του
Πώς να βρείτε την πλευρά του τριγώνου. Αρχίζοντας με
Πλεκτά γάντια πλεκτά: διαγράμματα με περιγραφή
Για να βοηθήσετε τον οικοδόμο: το βάρος και το μέγεθος της δοκού Ι
Πλαστική γωνία - πλεονεκτήματα και περιοχή
Μηχανή λείανσης: ποικιλίες και
Δημοσιεύσεις
επάνω