Aoleu
1. Muți mouse-ul în pagina web și dispare = =
*{ cursor: none!important; }2. Efect simplu de estompare a textului
*{ color: transparent; text-umbră: #111 0 0 5px; }![]()
3. Granițe multiple
.div { box-shadow: 0 0 0 6px rgba(0, 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, 0.2); înălțime: 200px; marjă: 50px auto; lățime: 400px}![]()
4. Editare CSS în timp real
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Operații simple în CSS
.div{ lățime: calc(100% - 500px); }![]()
6、Raza de frontieră
Pentru că, practic, mulți oameni îl folosesc astfel:
.div { border-radius: 4px; }![]()
Un pic mai high-end este așa:
.div { border-radius: 4px 6px 6px 4px; }![]()
Totuși, așa este folosită tehnologia supremă a persoanelor negre:
.div { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
rază de margine Poate fi atribuită 8 valori:
Partea din față a tăieturii influențează direcția orizontală, iar partea din spate a tăieturii influențează direcția verticală.
Fiecare număr reprezintă patru direcții diferite.
7、Offset-contorn
Când scrii CSS sub input, vei fi familiarizat cu următoarele instrucțiuni:
input { outline : none; }input:focus { outline : none; Așa se elimină wireframe-ul albastru implicit din cutia de intrare a intrării.
Există și o proprietate outline-offset în CSS unde poți seta distanța wireframe-ului implicit:
input { outline-offset: 4px ; }(Grup de schimb de învățare front-end web: 328058344 Fără discuții mărunte, nu intra decât dacă îți place! Ajustează dimensiunea valorii atributului și poți vedea schimbarea distanței conturului.
În final, voi prezenta o demonstrație a marelui alb înainte de fapte
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> corp { fundal: #595959; } #baymax{ /* este setat la centru*/ margine: 0 auto; /*înălțime*/ înălțime: 600px; /*ascunde suprapliniere*/ debordare: ascunsă; } #head{ înălțime: 64px; lățime: 100px; /*Definiți forma colțului rotunjit ca procentaj*/rază de margine: 50%; /*fundal*/ fundal: #fff; marjă: 0 auto; marjă-jos: -20px; /*Setează stilul marginii de jos*/ marginea de jos: 5px solid #e0e0e0; /*atributul stabilește ordinea de suprapunere a elementelor; Elementele cu o ordine de stivă mai mare vor fi întotdeauna în fața elementelor cu ordinea de stivă mai mică*/ indicele z: 100; /*Generează elemente poziționate relative*/ poziție: relativă; } #eye, #eye2{ lățime: 11px; înălțime: 13px; Context: #282828; rază de graniță: 50%; Poziție: relativă; top: 30px; stânga: 27px; /*rotește elementul*/transformă: rotește(8grade); } #eye2{ /*Fă să rotească simetric*/ transformă: rotește(-8deg); stânga: 69px; Top: 17px; } #mouth{ lățime: 38px; Înălțime: 1,5px; Context: #282828; Poziție: relativă; stânga: 34px; top: 10px; } /*Tors și abdomen*/ #torso, #belly{ margine: 0 auto; } înălțime: 200px; lățime: 180px; Context: #fff; rază de graniță: 47%; /*Setează bordură*/ bordură: 5px #e0e0e0 solidă; Border-Top: niciunul; Z-index: 1; } #belly{ înălțime: 300px; lățime: 245px; marjă-sus: -140px; Z-index: 5; } #cover{ lățime: 190px; Context: #fff; Înălțime: 150px; marjă: 0 auto; Poziție: relativă; sus: -20px; rază de graniță: 50%; } /*inimă*/ #heart{ lățime:25px; Înălțime: 25px; rază de graniță: 50%; poziție: relativ; /*Adaugă efecte de umbră în jurul marginii*/ box-shadow:2px 5px 2px #ccc inset; dreapta:-115px; top: 40px; Z-index: 111; borduri: 1px solid #ccc; } /*braț*/ #left-braț, #right-braț{ înălțime: 270px; lățime: 120px; rază de graniță: 50%; Context: #fff; marjă: 0 auto; Poziție: relativă; Top: -350px; Left: -100px; transformare: rotire (20°C); Z-index: -1; } #right-braț{ transformă: rotește(-20grade); rămasă: 100px; top: -620px; } /*deget*/ #l-deget mare, #r-deget mare{ înălțime: 50px; lățime: 20px; rază de graniță: 50%; Context: #fff; Poziție: relativă; Top: 250px; stânga: 50px; transformă: rotește(-50°C); } #r-bigfinger{ stânga: 50px; transformă: rotește (50°); } #l-deget-mic, #r-deget{ înălțime: 35px; lățime: 15px; rază de graniță: 50%; Context: #fff; Poziție: relativă; partea de sus: 195px; stânga: 66px; transformă: rotește(-40°C); } #r-deget-mic{ fundal: #fff; transformă: rotește (40°); partea de sus: 195px; stânga: 37px; } /*coapsă*/ #left-picior, #right-picior{ înălțime: 170px; lățime: 90px; rază de graniță: 40% 30% 10px 45%; Context: #fff; Poziție: relativă; Top: -640px; stânga: -45px; transformă: rotește(-1 grad); Z-index: -2; marjă: 0 auto; } #right-picior{ fundal: #fff; rază de frontieră: 30% 40% 45% 10px; marjă: 0 auto; Sus: -810px; stânga: 50px; transformă: rotește (1 grad); </style><body> } <div id="baymax"> <!-- Definește capul, inclusiv doi ochi, gura --> <div id="cap"> <div id="ochi"></div> <div id="eye2"></div> <div id="gură"></div> </div> <!-- Definește trunchiul, inclusiv inima --> <div id="tors"> <div id="inimă"></div> </div> <!-- Definește burta, abdomenul, inclusiv capacul (și joncțiunea trunchiului) --> <div id="burtă"> <div id="acoperire"></div> </div> <!-- Definiți brațul stâng, incluzând două degete, unul mare și unul mic --> <div id="brațul stâng"> <div id="l-degetul mare"></div> <div id="l-degetul mic"></div> </div> <!-- Definiți brațul drept, care include și un deget mare și unul mic --> <div id="brațul drept"> <div id="r-degetul mare"></div> <div id="r-degetul mic"></div> </div> <!-- definește piciorul stâng --> <div id="piciorul stâng"></div> <!-- definește piciorul drept --> <div id="piciorul drept"></div> </div></body><html>![]()
|
Postat pe 04.12.2017 20:24:39
|
|
|
|
Postat pe 05.12.2017 09:10:05
|
Postat pe 05.12.2017 09:21:19
