Οι αρχάριοι παίζουν κάποια μαύρη τεχνολογία στο CSS

Φανσιαολίν84 · Δημοσιεύτηκε στις 4/12/2017 8:24:39 μ.μ.

Ωχ
1. Μετακινήστε το ποντίκι στην ιστοσελίδα και έχει φύγει = =
*{ δρομέας: κανένας!σημαντικό; }2. Απλό εφέ θολώματος κειμένου
*{ χρώμα: διαφανές; κείμενο-σκιά: #111 0 0 5px; }
3. Πολλαπλά σύνορα
.div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); ύψος: 200px; περιθώριο: 50 εικονοστοιχεία αυτόματο; Πλάτος: 400px}
4. Επεξεργαστείτε το CSS σε πραγματικό χρόνο
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Απλές λειτουργίες σε CSS
.div{ πλάτος: calc(100% - 500px); }
6, ακτίνα συνόρων
Επειδή βασικά πολλοί άνθρωποι το χρησιμοποιούν με αυτόν τον τρόπο:
.div { ακτίνα περιγράμματος: 4px; }
Λίγο πιο high-end είναι κάπως έτσι:
.div { ακτίνα περιγράμματος: 4px 6px 6px 4px; }
Ωστόσο, έτσι χρησιμοποιείται η απόλυτη μαύρη τεχνολογία:
.div { ακτίνα περιγράμματος: 5px 5px 3px 2px / 5px 5px 1px 3px; }

ακτίνα περιγράμματος Μπορεί να εκχωρηθούν 8 τιμές:
Το μπροστινό μέρος της κάθετου επηρεάζει την οριζόντια κατεύθυνση και το πίσω μέρος της κάθετου επηρεάζει την κατακόρυφη κατεύθυνση.
Κάθε αριθμός αντιπροσωπεύει τέσσερις διαφορετικές κατευθύνσεις.

7, μετατόπιση περιγράμματος
Όταν γράφετε CSS υπό είσοδο, θα είστε εξοικειωμένοι με τις ακόλουθες δηλώσεις:
είσοδος { περίγραμμα : καμία; }input:focus { outline : none; Αυτός είναι ο τρόπος κατάργησης του προεπιλεγμένου μπλε περιγράμματος από το πλαίσιο εισαγωγής εισόδου.
Υπάρχει επίσης μια ιδιότητα μετατόπισης περιγράμματος στο CSS όπου μπορείτε να ορίσετε την απόσταση του προεπιλεγμένου wireframe:
είσοδος { περίγραμμα-μετατόπιση: 4 εικονοστοιχεία ; }(Ομάδα ανταλλαγής μάθησης στο Web front-end: 328058344 Όχι κουβέντα, μην μπείτε αν δεν σας αρέσει! Προσαρμόστε το μέγεθος της τιμής του χαρακτηριστικού και μπορείτε να δείτε την αλλαγή απόστασης του περιγράμματος.
Τέλος, θα παρουσιάσω ένα demo του μεγάλου λευκού πριν από τα γεγονότα
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> σώμα { φόντο: #595959; } #baymax{ /* έχει οριστεί στο κέντρο*/ περιθώριο: 0 αυτόματο; /*ύψος*/ ύψος: 600 εικονοστοιχεία; /*απόκρυψη υπερχείλισης*/ υπερχείλισης: κρυφό; } #head{ ύψος: 64px; πλάτος: 100 εικονοστοιχεία; /*Καθορίστε το σχήμα της στρογγυλεμένης γωνίας ως ποσοστό*/ακτίνα περιγράμματος: 50%; /*φόντο*/ φόντο: #fff; περιθώριο: 0 αυτόματο; περιθώριο-κάτω: -20 εικονοστοιχεία; /*Ορίστε το στυλ του κάτω περιγράμματος*/ περίγραμμα-κάτω: 5px συμπαγής #e0e0e0; /*ορίζει τη σειρά στοίβαξης των στοιχείων. Τα στοιχεία με υψηλότερη σειρά στοίβας θα βρίσκονται πάντα μπροστά από τα στοιχεία με χαμηλότερη σειρά στοίβας*/ z-index: 100; /*Δημιουργία σχετικών τοποθετημένων στοιχείων*/ θέση: σχετική; } #eye, #eye2{ πλάτος: 11px; ύψος: 13 εικονοστοιχεία; Ιστορικό: #282828; ακτίνα περιγράμματος: 50%; θέση: σχετική· κορυφή: 30 εικονοστοιχεία; αριστερά: 27 εικονοστοιχεία; /*περιστροφή του στοιχείου*/μετασχηματισμός: περιστροφή (8 μοίρες); } #eye2{ /*Κάντε το να περιστρέφεται συμμετρικά*/ μετασχηματισμός: περιστροφή (-8 μοίρες); αριστερά: 69 εικονοστοιχεία; κορυφή: 17 εικονοστοιχεία; } #mouth{ πλάτος: 38px; ύψος: 1,5 εικονοστοιχεία; Ιστορικό: #282828; θέση: σχετική· αριστερά: 34 εικονοστοιχεία; κορυφή: 10 εικονοστοιχεία; } /*Κορμός και κοιλιά*/ #torso, #belly{ margin: 0 auto; } ύψος: 200px; πλάτος: 180 εικονοστοιχεία; Ιστορικό: #fff; ακτίνα περιγράμματος: 47%; /*Ορισμός περιγράμματος*/ περίγραμμα: 5 εικονοστοιχεία συμπαγούς #e0e0e0; περίγραμμα-κορυφή: κανένα; z-index: 1; } #belly{ ύψος: 300px; πλάτος: 245 εικονοστοιχεία; περιθώριο-κορυφή: -140 εικονοστοιχεία; z-index: 5; } #cover{ πλάτος: 190 εικονοστοιχεία; Ιστορικό: #fff; ύψος: 150 εικονοστοιχεία; περιθώριο: 0 αυτόματο; θέση: σχετική· κορυφή: -20px; ακτίνα περιγράμματος: 50%; } /*καρδιά*/ #heart{ πλάτος:25 εικονοστοιχεία; ύψος: 25 εικονοστοιχεία; ακτίνα περιγράμματος: 50%; θέση: σχετική; /*Προσθήκη εφέ σκιάς γύρω από το περίγραμμα*/ box-shadow:2px 5px 2px #ccc ένθετο. δεξιά:-115px; κορυφή: 40 εικονοστοιχεία; z-δείκτης:111; περίγραμμα: 1 εικονοστοιχείο στερεά #ccc; } /*arm*/ #left-arm, #right-arm{ ύψος: 270px; πλάτος: 120 εικονοστοιχεία; ακτίνα περιγράμματος: 50%; Ιστορικό: #fff; περιθώριο: 0 αυτόματο; θέση: σχετική· κορυφή: -350 εικονοστοιχεία; αριστερά: -100px; μετασχηματισμός: περιστροφή (20 μοίρες); z-index: -1; } #right-βραχίονας{ μετασχηματισμός: περιστροφή (-20 μοίρες); αριστερά: 100px; κορυφή: -620px; } /*δάχτυλο*/ #l-bigfinger, #r-bigfinger{ ύψος: 50px; πλάτος: 20 εικονοστοιχεία; ακτίνα περιγράμματος: 50%; Ιστορικό: #fff; θέση: σχετική· κορυφή: 250px; αριστερά: 50 εικονοστοιχεία; μετασχηματισμός: περιστροφή (-50 μοίρες); } #r-bigfinger{ αριστερά: 50px; μετασχηματισμός: περιστροφή (50 μοίρες); } #l-μικρό δάχτυλο, #r-μικρό δάχτυλο{ ύψος: 35 εικονοστοιχεία; πλάτος: 15 εικονοστοιχεία; ακτίνα περιγράμματος: 50%; Ιστορικό: #fff; θέση: σχετική· κορυφή: 195 εικονοστοιχεία; αριστερά: 66px; μετασχηματισμός: περιστροφή (-40 μοίρες); } #r-smallfinger{ φόντο: #fff; μετασχηματισμός: περιστροφή (40 μοίρες); κορυφή: 195 εικονοστοιχεία; αριστερά: 37px; } /*μηρός*/ #left-πόδι, #right-πόδι{ ύψος: 170px; πλάτος: 90 εικονοστοιχεία; ακτίνα περιγράμματος: 40% 30% 10px 45%; Ιστορικό: #fff; θέση: σχετική· κορυφή: -640px; αριστερά: -45px; μετασχηματισμός: περιστροφή (-1 μοίρες); z-index: -2; περιθώριο: 0 αυτόματο; } #right-leg{ φόντο: #fff; ακτίνα περιγράμματος: 30 τοις εκατό 40 τοις εκατό 45 τοις εκατό 10 εικονοστοιχεία; περιθώριο: 0 αυτόματο; κορυφή: -810px; αριστερά: 50 εικονοστοιχεία; μετασχηματισμός: περιστροφή (1 μοίρες); </style><body> } <div id="baymax">  <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="mouth"></div> </div>  <div id="κορμός"> <div id="καρδιά"></div> </div>  <div id="κοιλιά"> <div id="κάλυμμα"></div> </div>  <div id="αριστερού βραχίονα"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div>  <div id="δεξί χέρι"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div>  <div id="αριστερό πόδι"></div>  <div id="δεξί πόδι"></div> </div></body><html>

ΚΟΥΈΡΤΙΟΥ · Δημοσιεύτηκε στις 5/12/2017 9:10:05 π.μ.

Ο κώδικας μπορεί να επεξεργαστεί

διαχειριστής · Δημοσιεύτηκε στις 5/12/2017 9:21:19 π.μ.

Το Dabai είναι καλό

Τακτοποίησε τον κώδικα

Η σύνδεση είναι ορατή.

[CSS/DIV] Οι αρχάριοι παίζουν κάποια μαύρη τεχνολογία στο CSS

Παρτιτούρα

Ενότητες που προβλήθηκαν