Au,
1. Flytt musen inn på nettsiden og den er borte = =
*{ markør: ingen!viktig; }2. Enkel tekstuskarphetseffekt
*{ farge: transparent; tekst-skygge: #111 0 0 5px; }![]()
3. Flere grenser
.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øyde: 200 px; margin: 50 px auto; Bredde: 400px}![]()
4. Rediger CSS i sanntid
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Enkle operasjoner i CSS
.div{ width: calc(100% - 500px); }![]()
6、grense-radius
Fordi i bunn og grunn bruker mange det på denne måten:
.div { grense-radius: 4px; }![]()
Litt mer high-end er slik:
.div { grense-radius: 4px 6px 6px 4px; }![]()
Men slik brukes den ultimate svarte teknologien:
.div { grense-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
Grenseradius Den kan tildeles 8 verdier:
Forsiden av skråstreken påvirker den horisontale retningen, og baksiden av skråstreken påvirker den vertikale retningen.
Hvert tall representerer fire forskjellige retninger.
7、Omriss-offset
Når du skriver CSS under input, vil du være kjent med følgende utsagn:
input { disposisjon : ingen; }input:focus { disposisjon : ingen; Slik fjerner man standard blå wireframe fra inngangsboksen.
Det finnes også en outline-offset-egenskap i CSS hvor du kan sette avstanden til standard wireframe:
input { omriss-offset: 4px ; }(Web front-end læringsutvekslingsgruppe: 328058344 Ingen småprat, ikke delta med mindre du liker det! Juster størrelsen på attributtverdien, så kan du se avstandsendringen i omrisset.
Til slutt vil jeg presentere en demonstrasjon av den store hviten før fakta
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> kropp { bakgrunn: #595959; } #baymax{ /* settes til sentrum*/ marg: 0 auto; /*høyde*/ høyde: 600px; /*skjul overløp*/ overløp: skjult; } #head{ høyde: 64px; bredde: 100px; /*Definer formen på det avrundede hjørnet som en prosent*/kant-radius: 50%; /*bakgrunn*/ bakgrunn: #fff; margin: 0 auto; margin-bunn: -20 px; /*Sett stilen på nedre kant*/ kant-nederst: 5px solid #e0e0e0; /*attributt angir stablingsrekkefølgen på elementene; Elementer med høyere stakkorden vil alltid ligge foran elementene med lavere stakkorden*/ z-indeks: 100; /*Generer relativt plasserte elementer*/ posisjon: relativ; } #eye, #eye2{ bredde: 11px; høyde: 13px; Bakgrunn: #282828; grenseradius: 50 %; Posisjon: Slektning; topp: 30px; venstre: 27px; /*rotere elementet*/transformasjon: rotere(8°); } #eye2{ /*Få den til å rotere symmetrisk*/ transformer: rotate(-8°); venstre: 69 px; Topp: 17 px; } #mouth{ bredde: 38px; høyde: 1,5 px; Bakgrunn: #282828; Posisjon: Slektning; venstre: 34px; Topp: 10px; } /*Torso og mage*/ #torso, #belly{ margin: 0 auto; } høyde: 200 px; Bredde: 180px; Bakgrunn: #fff; grenseradius: 47 %; /*Sett kant*/ kant: 5px solid #e0e0e0; grense-topp: ingen; Z-indeks: 1; } #belly{ høyde: 300px; Bredde: 245 px; margin-topp: -140 px; Z-indeks: 5; } #cover{ bredde: 190px; Bakgrunn: #fff; høyde: 150px; margin: 0 auto; Posisjon: Slektning; Topp: -20 px; grenseradius: 50 %; } /*hjerte*/ #heart{ bredde:25px; høyde: 25 px; grenseradius: 50 %; Posisjon: Relativ; /*Legg til skyggeeffekter rundt kanten*/ boks-skygge:2px 5px 2px #ccc innfelt; Høyre:-115px; topp: 40 px; Z-indeks: 111; Kant: 1 px solid #ccc; } /*arm*/ #left-arm, #right-arm{ høyde: 270px; Bredde: 120 px; grenseradius: 50 %; Bakgrunn: #fff; margin: 0 auto; Posisjon: Slektning; Topp: -350 px; venstre: -100px; transformasjon: rotasjon (20 grader); Z-indeks: -1; } #right-arm{ transform: rotate(-20°); venstre: 100px; Topp: -620 px; } /*finger*/ #l-bigfinger, #r-bigfinger{ høyde: 50px; bredde: 20px; grenseradius: 50 %; Bakgrunn: #fff; Posisjon: Slektning; Topp: 250 px; venstre: 50px; transform: rotere (-50 grader); } #r-bigfinger{ venstre: 50px; transform: roter (50 grader); } #l-smallfinger, #r-smallfinger{ height: 35px; Bredde: 15px; grenseradius: 50 %; Bakgrunn: #fff; Posisjon: Slektning; Topp: 195 px; venstre: 66px; transformasjon: roter (-40 grader); } #r-smallfinger{ bakgrunn: #fff; transformer: rotere (40 grader); Topp: 195 px; venstre: 37px; } /*lår*/ #left-ben, #right-ben{ høyde: 170px; Bredde: 90 px; grense-radius: 40 % 30 % 10 px 45 %; Bakgrunn: #fff; Posisjon: Slektning; Topp: -640 px; venstre: -45px; transform: rotate(-1°); Z-indeks: -2; margin: 0 auto; } #right-ben{ bakgrunn: #fff; grenseradius: 30 % 40 % 45 % 10px; margin: 0 auto; Topp: -810px; venstre: 50px; transformer: rotere (1 grad); </style><body> } <div id="baymax"> <!-- Definer hodet, inkludert to øyne, munn --> <div id="hode"> <div id="øye"></div> <div id="eye2"></div> <div id="munn"></div> </div> <!-- Definer overkroppen, inkludert hjertet --> <div id="torso"> <div id="hjerte"></div> </div> <!-- Definer magen, magen, inkludert dekselet (og overkroppens overgang) --> <div id="mage"> <div id="cover"></div> </div> <!-- Definer venstre arm, inkludert to fingre, en stor og en liten --> <div id="venstre-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- Definer høyre arm, som også inkluderer en stor og en liten finger --> <div id="høyrearm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- definerer venstre ben --> <div id="left-leg"></div> <!-- definerer høyre ben --> <div id="høyre-ben"></div> </div></body><html>![]()
|
Publisert på 04.12.2017 20:24:39
|
|
|
|
Publisert på 05.12.2017 09:10:05
|
Publisert på 05.12.2017 09:21:19
