Av
1. Flyt musen ind på websiden, og den er væk = =
*{ cursor: ingen!vigtigt; }2. Simpel tekstsløringseffekt
*{ farve: transparent; tekst-skygge: #111 0 0 5px; }![]()
3. Flere grænser
.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); højde: 200px; margin: 50px auto; Bredde: 400px}![]()
4. Rediger CSS i realtid
<!DOCTYPE html><html> <body> <style style="display:block" indholdRedigerbar> body { color: blue } </style> </body></html>![]()
5. Simple operationer i CSS
.div{ width: calc(100% - 500px); }![]()
6、grænse-radius
Fordi mange mennesker grundlæggende bruger det på denne måde:
.div { grænse-radius: 4px; }![]()
Lidt mere high-end er sådan her:
.div { grænse-radius: 4px 6px 6px 4px; }![]()
Men sådan bruges den ultimative sorte teknologi:
.div { grænse-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
Grænseradius Den kan tildeles 8 værdier:
Forsiden af skråstregen påvirker den horisontale retning, og bagsiden af skråstregen påvirker den vertikale retning.
Hvert tal repræsenterer fire forskellige retninger.
7、Omrids-offset
Når du skriver CSS under input, vil du være bekendt med følgende udsagn:
input { disposition : ingen; }input:focus { disposition : ingen; Sådan fjerner man det standard blå wireframe fra inputboksen.
Der er også en outline-offset-egenskab i CSS, hvor du kan sætte afstanden til standardwireframen:
input { omrids-offset: 4px ; }(Web front-end læringsudvekslingsgruppe: 328058344 Ingen smalltalk, gå ikke ind, medmindre du kan lide det! Juster størrelsen på attributværdien, og du kan se afstandsændringen af omridsen.
Endelig vil jeg præsentere en demonstration af den store hvide før fakta
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> body { baggrund: #595959; } #baymax{ /* sættes til center*/ margen: 0 auto; /*højde*/ højde: 600px; /*skjul overløb*/ overløb: skjult; } #head{ højde: 64px; Bredde: 100px; /*Definér formen på det afrundede hjørne som en procentdel*/kant-radius: 50%; /*baggrund*/ baggrund: #fff; margin: 0 auto; margin-bund: -20px; /*Sæt stilen på den nederste kant*/ kant-bund: 5px ensfarvet #e0e0e0; /*attribut fastsætter stablingsrækkefølgen af elementer; Elementer med højere stakorden vil altid være foran elementerne med lavere stakorden*/ z-indeks: 100; /*Generer relativt placerede elementer*/ position: relativ; } #eye, #eye2{ bredde: 11px; højde: 13px; Baggrund: #282828; grænseradius: 50%; Position: Relativ; top: 30px; venstre: 27px; /*roter elementet*/transformer: roter(8°); } #eye2{ /*Få den til at rotere symmetrisk*/ transformer: roter(-8°); venstre: 69px; Top: 17 px; } #mouth{ bredde: 38px; højde: 1,5 px; Baggrund: #282828; Position: Relativ; venstre: 34px; Top: 10px; } /*Torso og mave*/ #torso, #belly{ margin: 0 auto; } højde: 200px; Bredde: 180px; Baggrund: #fff; Grænseradius: 47%; /*Sæt kant*/ kant: 5px solid #e0e0e0; Border-top: ingen; z-indeks: 1; } #belly{ højde: 300px; Bredde: 245px; margin-top: -140px; Z-indeks: 5; } #cover{ bredde: 190px; Baggrund: #fff; højde: 150px; margin: 0 auto; Position: Relativ; Top: -20px; grænseradius: 50%; } /*hjerte*/ #heart{ width:25px; højde: 25px; grænseradius: 50%; Position: Relativ; /*Tilføj skyggeeffekter omkring kanten*/ boks-skygge:2px 5px 2px #ccc indsat; Højre: -115 px; top: 40px; Z-indeks: 111; Kant: 1 px solid #ccc; } /*arm*/ #left-arm, #right-arm{ højde: 270px; Bredde: 120px; grænseradius: 50%; Baggrund: #fff; margin: 0 auto; Position: Relativ; Top: -350px; venstre: -100px; transformer: rotere (20 grader); z-indeks: -1; } #right-arm{ transform: rotate(-20°); venstre: 100px; Top: -620px; } /*finger*/ #l-bigfinger, #r-bigfinger{ højde: 50px; Bredde: 20px; grænseradius: 50%; Baggrund: #fff; Position: Relativ; top: 250px; venstre: 50px; transformér: roterer (-50 grader); } #r-bigfinger{ venstre: 50px; transformér: roterer (50 grader); } #l-smallfinger, #r-smallfinger{ height: 35px; Bredde: 15px; grænseradius: 50%; Baggrund: #fff; Position: Relativ; Top: 195px; venstre: 66px; transformér: roter(-40 grader); } #r-smallfinger{ baggrund: #fff; transformer: rotere (40 grader); Top: 195px; venstre: 37px; } /*lår*/ #left-ben, #right-ben{ højde: 170px; Bredde: 90px; Grænseradius: 40% 30% 10px 45%; Baggrund: #fff; Position: Relativ; Top: -640 px; venstre: -45px; transformér: roter(-1°); Z-indeks: -2; margin: 0 auto; } #right-leg{ baggrund: #fff; Grænseradius: 30% 40% 45% 10px; margin: 0 auto; Top: -810px; venstre: 50px; transformér: roter (1 grad); </style><body> } <div id="baymax"> <!-- Definér hovedet, inklusive to øjne, mund --> <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="mund"></div> </div> <!-- Definér overkroppen, inklusive hjertet --> <div id="torso"> <div id="hjerte"></div> </div> <!-- Definér maven, abdomen, inklusive dækslet (og overkroppens samling) --> <div id="mave"> <div id="cover"></div> </div> <!-- Definer venstre arm, inklusive to fingre, en stor og en lille --> <div id="venstre-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- Definér højre arm, som også inkluderer en stor og en lille finger --> <div id="højre-arm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- definerer venstre ben --> <div id="left-leg"></div> <!-- definerer højre ben --> <div id="højre-ben"></div> </div></body><html>![]()
|
Opslået på 04/12/2017 20.24.39
|
|
|
|
Opslået på 05/12/2017 09.10.05
|
Opslået på 05/12/2017 09.21.19
