Novinci igrajo nekaj črne tehnologije v CSS

fanxiaolin84 · Objavljeno na 4. 12. 2017 20:24:39

Au
1. Premakni miško na spletno stran in izgine = =
*{ kazalec: noveč! pomembno; }2. Preprost učinek zamegljenosti besedila
*{ barva: prosojna; Text-Shadow: #111 0 0 5px; }
3. Več mej
.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); višina: 200px; marža: 50px auto; Širina: 400px}
4. Urejanje CSS v realnem času
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Preproste operacije v CSS
.div{ širina: calc(100% - 500px); }
6、mejni radij
Ker ga v bistvu veliko ljudi uporablja takole:
.div { mejni radij: 4px; }
Malo bolj visokorazredno je takole:
.div { mejni radij: 4px 6px 6px 4px; }
Vendar pa se tako uporablja ultimativna črna tehnologija:
.div { mejni radij: 5px 5px 3px 2px / 5px 5px 1px 3px; }

mejni polmer Lahko mu dodelimo 8 vrednosti:
Sprednja stran poševnice vpliva na vodoravno smer, zadnja stran poševnice pa na navpično smer.
Vsaka številka predstavlja štiri različne smeri.

7、Obris-zamik
Pri pisanju CSS pod vhodom boste seznanjeni z naslednjimi izjavami:
input { outline : none; }input:focus { outline : none; Tako odstranite privzeti modri žični okvir iz vhodne škatle.
V CSS obstaja tudi lastnost zamika obrisa, kjer lahko nastavite razdaljo privzetega žičnega modela:
vhod { outline-offset: 4px ; }(Spletna začetna skupina za izmenjavo učnih podatkov: 328058344 Brez malenkostnih pogovorov, ne vstopite, razen če vam je všeč! Prilagodite velikost vrednosti atributa in lahko vidite spremembo razdalje obrisa.
Na koncu bom predstavil demonstracijo Big White pred dejstvi
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> telo { ozadje: #595959; } #baymax{ /* je nastavljen na center*/ rob: 0 auto; /*višina*/ višina: 600px; /*skrij prelivanje*/ prelivanje: skrito; } #head{ višina: 64px; širina: 100px; /*Obliko zaobljenega vogala definirajte kot odstotek*/mejni radij: 50%; /*ozadje*/ ozadje: #fff; razlika: 0 avtomatskih udarcev; Spodnji rob: -20px; /*Nastavi slog spodnjega roba*/ rob-spodnji rob: 5px polna #e0e0e0; /*atribut določa vrstni red zlaganja elementov; Elementi z višjim vrstnim redom sklada bodo vedno pred elementi z nižjim vrstnim redom sklada*/ z-indeks: 100; /*Generiraj relativne pozicionirane elemente*/ položaj: relativno; } #eye, #eye2{ širina: 11px; višina: 13px; ozadje: #282828; mejni radij: 50 %; položaj: relativni; zgoraj: 30px; levo: 27px; /*zavrti element*/transformirati: zavrti (8 stopinj); } #eye2{ /*Naj se simetrično vrti*/ transformira: rotira(-8°); levo: 69px; zgoraj: 17px; } #mouth{ širina: 38px; višina: 1,5 px; ozadje: #282828; položaj: relativni; levo: 34px; zgoraj: 10px; } /*Trup in trebuh*/ #torso, #belly{ margina: 0 auto; } višina: 200px; širina: 180px; ozadje: #fff; mejni radij: 47 %; /*Nastavi rob*/ rob: 5px polna #e0e0e0; mejni vrh: nobenih; z-indeks: 1; } #belly{ višina: 300px; širina: 245px; zgornji rob: -140px; z-indeks: 5; } #cover{ širina: 190px; ozadje: #fff; višina: 150px; razlika: 0 avtomatskih udarcev; položaj: relativni; zgoraj: -20px; mejni radij: 50 %; } /*heart*/ #heart{ širina:25px; višina: 25px; mejni radij: 50 %; položaj: relativno; /*Dodaj senčne učinke okoli roba*/ box-senca:2px 5px 2px #ccc vstavljeno; desno:-115px; zgoraj: 40px; z-indeks:111; rob: 1 px trdna #ccc; } /*rok*/ #left-roka, #right-rok{ višina: 270px; širina: 120px; mejni radij: 50 %; ozadje: #fff; razlika: 0 avtomatskih udarcev; položaj: relativni; zgoraj: -350px; levo: -100px; transformacija: rotacija (20 stopinj); z-indeks: -1; } #right-arm{ transformacija: rotacija(-20°); levo: 100px; zgoraj: -620px; } /*finger*/ #l-bigfinger, #r-bigfinger{ višina: 50px; širina: 20px; mejni radij: 50 %; ozadje: #fff; položaj: relativni; zgoraj: 250px; levo: 50px; transformacija: rotacija (-50°); } #r-bigfinger{ levo: 50px; transformacija: rotacija (50 stopinj); } #l-Littlefinger, #r-Smallfinger{ višina: 35px; širina: 15px; mejni radij: 50 %; ozadje: #fff; položaj: relativni; zgoraj: 195px; levo: 66px; transformacija: rotacija (-40 stopinj); } #r-mali prst{ ozadje: #fff; transformacija: rotacija (40 stopinj); zgoraj: 195px; levo: 37px; } /*stegno*/ #left-noga, #right-noga{ višina: 170px; širina: 90px; mejni radij: 40% 30% 10px 45%; ozadje: #fff; položaj: relativni; zgoraj: -640px; levo: -45px; transformacija: rotacija (-1 stopnja); z-indeks: -2; razlika: 0 avtomatskih udarcev; } #right-noga{ ozadje: #fff; mejni radij: 30% 40% 45% 10px; razlika: 0 avtomatskih udarcev; zgoraj: -810px; levo: 50px; transformacija: rotacija (1 stopinja); </style><body> } <div id="baymax">  <div id="glava"> <div id="oko"></div> <div id="eye2"></div> <div id="usta"></div> </div>  <div id="trup"> <div id="srce"></div> </div>  <div id="trebuh"> <div id="pokritje"></div> </div>  <div id="leva roka"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div>  <div id="desna roka"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div>  <div id="leva noga"></div>  <div id="desna noga"></div> </div></body><html>

QWERTYU · Objavljeno na 5. 12. 2017 09:10:05

Kodo je mogoče urejati

Admin · Objavljeno na 5. 12. 2017 09:21:19

Dabai je dober

Urejeno kodo

Prijava je vidna.

[CSS/DIV] Novinci igrajo nekaj črne tehnologije v CSS

Partitura

Ogledi odsekov