Iesācēji spēlē dažas melnās tehnoloģijas CSS

fanxiaolin84 · Publicēts 04.12.2017 20:24:39

Ak,
1. Pārvietojiet peli tīmekļa lapā, un tā ir pazudusi = =
*{ kursors: nav!important; }2. Vienkāršs teksta izplūšanas efekts
*{ krāsa: caurspīdīga; teksta ēna: #111 0 0 5px; }
3. Vairākas robežas
.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); augstums: 200px; piemale: 50px auto; platums: 400px}
4. Rediģējiet CSS reāllaikā
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Vienkāršas darbības CSS
.div{ platums: calc(100% - 500px); }
6 、 robežas rādiuss
Jo būtībā daudzi cilvēki to izmanto šādi:
.div { robežas rādiuss: 4px; }
Nedaudz augstākās klases ir šāds:
.div { robežas rādiuss: 4px 6px 6px 4px; }
Tomēr šādi tiek izmantota galīgā melnā tehnoloģija:
.div { robežas rādiuss: 5px 5px 3px 2px / 5px 5px 1px 3px; }

robežas rādiuss Tam var piešķirt 8 vērtības:
Slīpsvītras priekšpuse ietekmē horizontālo virzienu, bet slīpsvītras aizmugurējā daļa ietekmē vertikālo virzienu.
Katrs skaitlis apzīmē četrus dažādus virzienus.

7 、 Kontūras nobīde
Rakstot CSS ievadē, jūs būsiet iepazinies ar šādiem apgalvojumiem:
ievade { kontūra : nav; }input:focus { kontūra : nav; Šādi noņemt noklusējuma zilo stiepļu rāmi no ievades lodziņa.
CSS ir arī kontūras-nobīdes rekvizīts, kurā varat iestatīt noklusējuma stiepļu rāmja attālumu:
ievade { kontūras nobīde: 4px ; }(Web front-end mācību apmaiņas grupa: 328058344 Nav mazas sarunas, nepieiet, ja vien jums tas nepatīk! Pielāgojiet atribūta vērtības lielumu, un jūs varat redzēt kontūras attāluma izmaiņas.
Visbeidzot, es iepazīstināšu ar lielā baltā demonstrāciju pirms faktiem
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> ķermenis { fons: #595959; } #baymax{ /* ir iestatīts uz centrs*/ piemale: 0 auto; /*augstums*/ augstums: 600px; /*slēpt pārplūdi*/ pārplūde: slēpta; } #head{ augstums: 64px; platums: 100px; /*Definējiet noapaļotā stūra formu procentos*/apmales rādiuss: 50%; /*fons*/ fons: #fff; margin: 0 auto; piemales apakšā: -20px; /*Iestatiet apakšējās apmales stilu*/ border-bottom: 5px solid #e0e0e0; /*atribūts nosaka elementu sakārtošanas secību; Elementi ar augstāku steka secību vienmēr atradīsies priekšā elementiem ar zemāku steka secību*/ z-indekss: 100; /*Ģenerēt relatīvi novietotus elementus*/ pozīcija: relatīva; } #eye, #eye2{ platums: 11px; augstums: 13px; fons: #282828; robežas rādiuss: 50%; amats: radinieks; augšpusē: 30px; pa kreisi: 27px; /*pagriezt elementu*/pārveidot: pagriezt(8grādi); } #eye2{ /*Padarīt to simetriski*/ transformēt: pagriezt(-8grādi); pa kreisi: 69px; augšā: 17px; } #mouth{ platums: 38px; augstums: 1.5px; fons: #282828; amats: radinieks; pa kreisi: 34px; augšpusē: 10px; } /*Rumpis un vēders*/ #torso, #belly{ margin: 0 auto; } augstums: 200px; platums: 180px; fons: #fff; robežas rādiuss: 47%; /*Iestatīt apmali*/ apmali: 5px cietā #e0e0e0; robeža: nav; Z indekss: 1; } #belly{ augstums: 300px; platums: 245px; margin-top: -140px; Z indekss: 5; } #cover{ platums: 190px; fons: #fff; augstums: 150px; margin: 0 auto; amats: radinieks; augšpusē: -20px; robežas rādiuss: 50%; } /*sirds*/ #heart{ platums:25px; augstums:25px; robežas rādiuss:50%; amats: relatīvs; /*Pievienojiet ēnu efektus ap apmali*/ lodziņa ēna:2px 5px 2px #ccc ieliktnis; pa labi:-115px; augšā: 40 pikseļi; z-indekss:111; robeža:1px cietā #ccc; } /*roka*/ #left-roka, #right-roka{ augstums: 270px; platums: 120px; robežas rādiuss: 50%; fons: #fff; margin: 0 auto; amats: radinieks; augšpusē: -350px; pa kreisi: -100px; transformēt: pagriezt (20 grādi); z-indekss: -1; } #right-arm{ transform: rotate(-20deg); pa kreisi: 100px; augšpusē: -620px; } /*finger*/ #l-bigfinger, #r-bigfinger{ augstums: 50px; platums: 20px; robežas rādiuss: 50%; fons: #fff; amats: radinieks; augšpusē: 250 pikseļi; pa kreisi: 50px; transformēt: pagriezt (-50 grādi); } #r-bigfinger{ pa kreisi: 50px; pārveidot: pagriezt (50 grādi); } #l-mazais pirksts, #r-mazais pirksts{ augstums: 35px; platums: 15px; robežas rādiuss: 50%; fons: #fff; amats: radinieks; augšā: 195px; pa kreisi: 66px; transformēt: pagriezt (-40 grādi); } #r-smallfinger{ fons: #fff; transformēt: pagriezt (40 grādi); augšā: 195px; pa kreisi: 37px; } /*augšstilbs*/ #left kājas, #right kājas{ augstums: 170px; platums: 90px; robežas rādiuss: 40% 30% 10px 45%; fons: #fff; amats: radinieks; augšpusē: -640px; pa kreisi: -45px; transformācija: pagriezt(-1 grāds); z-indekss: -2; margin: 0 auto; } #right-leg{ fons: #fff; robežas rādiuss:30% 40% 45% 10px; margin: 0 auto; augšpusē: -810px; pa kreisi: 50px; transformācija: pagriezt(1 grāds); </style><body> } <div id="baymax">  <div id="head"> <div id="eye"></div> <div id="eye2"> <</div>div id="mouth"></div> </div>  <div id="torso"> <div id="sirds"></div> </div>  <div id="vēders"> <div id="cover"></div> </div>  <div id="left-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div>  <div id="labā roka"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div>  <div id="left-leg"></div>  <div id="labā kāja"></div> </div></body><html>

QWERTYU · Publicēts 05.12.2017 09:10:05

Kodu var rediģēt

Admin · Publicēts 05.12.2017 09:21:19

Dabai ir labs

Sakārtots kods

Pieteikšanās ir redzama.

[CSS / DIV] Iesācēji spēlē dažas melnās tehnoloģijas CSS

Vērtējums

Skatītās sadaļas