Nováčikovia hrajú s čiernou technológiou v CSS

fanxiaolin84 · Zverejnené 4. 12. 2017 20:24:39

Au
1. Presuniem myš na webovú stránku a zmizne = =
*{ kurzor: žiadne! dôležité; }2. Jednoduchý efekt rozmazania textu
*{ farba: priehľadná; text-tieň: #111 0 0 5px; }
3. Viaceré hranice
.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); Výška: 200px; Rezerva: 50px auto; Šírka: 400px}
4. Upravovať CSS v reálnom čase
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Jednoduché operácie v CSS
.div{ width: calc(100% - 500px); }
6、hranicový polomer
Pretože v podstate veľa ľudí to používa takto:
.div { border-radius: 4px; }
Trochu viac high-end je takto:
.div { okrajový polomer: 4px 6px 6px 4px; }
Takto sa však využíva ultimátna čierna technológia:
.div { okrajový polomer: 5px 5px 3px 2px / 5px 5px 1px 3px; }

hranica s polomerom Môže byť priradených 8 hodnôt:
Predná časť lomky ovplyvňuje horizontálny smer a zadná strana lomky vertikálny smer.
Každé číslo predstavuje štyri rôzne smery.

7、Outline-offset
Pri písaní CSS pod vstupom budete oboznámení s nasledujúcimi výrokmi:
vstup { osnova : žiadny; }input:focus { outline : none; Takto odstrániť predvolený modrý wireframe z vstupného boxu.
V CSS je tiež vlastnosť outline-offset, kde môžete nastaviť vzdialenosť predvoleného wireframe:
vstup { outline-offset: 4px ; }(Webová front-end výmenná skupina: 328058344 Žiadne malé reči, nevstupuj, ak sa ti to nepáči! Upravte veľkosť hodnoty atribútu a uvidíte zmenu vzdialenosti obrysu.
Nakoniec predstavím ukážku veľkého bieleho pred faktami
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> telo { pozadie: #595959; } #baymax{ /* je nastavený na stred*/ margin: 0 auto; /*výška*/ výška: 600px; /*skryť pretečenie*/ pretečenie: skryté; } #head{ výška: 64px; šírka: 100px; /*Definujte tvar zaobleného rohu ako percento*/polomer okraja: 50%; /*pozadie*/ pozadie: #fff; Rozdiel: 0 auto; Margin-bottom: -20px; /*Nastavte štýl spodného okraja*/ spodný okraj: 5px plné #e0e0e0; /*atribút určuje poradie stohovania prvkov; Prvky s vyšším poradím zásobníka budú vždy pred prvkami s nižším poradím zásobníka*/ z-indexom: 100; /*Generovať relatívne umiestnené prvky*/ pozícia: relatívna; } #eye, #eye2{ šírka: 11px; Výška: 13px; Pozadie: #282828; hraničný polomer: 50 %; pozícia: relatívna; hore: 30px; vľavo: 27px; /*rotujte prvok*/transformujte: rotate(8°g); } #eye2{ /*Otočiť ho symetricky*/ transformovať: rotovať(-8°); vľavo: 69px; hore: 17px; } #mouth{ šírka: 38px; výška: 1,5px; Pozadie: #282828; pozícia: relatívna; vľavo: 34px; hore: 10px; } /*Trup a brucho*/ #torso, #belly{ margin: 0 auto; } Výška: 200px; šírka: 180px; Pozadie: #fff; hranicový polomer: 47 %; /*Nastaviť okraj*/ okraj: 5px pevný #e0e0e0; Okrajová časť: žiadna; z-index: 1; } #belly{ výška: 300px; šírka: 245px; okraj na okraji: -140px; z-index: 5; } #cover{ šírka: 190px; Pozadie: #fff; Výška: 150px; Rozdiel: 0 auto; pozícia: relatívna; hore: -20px; hraničný polomer: 50 %; } /*srdce*/ #heart{ šírka:25px; výška: 25px; hranicový polomer: 50 %; pozícia: relatívna; /*Pridať tieňové efekty okolo okraja*/ box-tieň: 2px 5px 2px 2px #ccc vložené; vpravo: -115px; hore: 40px; z-index:111; okraj: 1 px pevný #ccc; } /*arm*/ #left-arm, #right-arm{ výška: 270px; šírka: 120px; hraničný polomer: 50 %; Pozadie: #fff; Rozdiel: 0 auto; pozícia: relatívna; hore: -350px; ľavo: -100px; transformovať: otočiť (20°); z-index: -1; } #right-arm{ transform: rotate(-20°); vľavo: 100px; hore: -620px; } /*finger*/ #l-bigfinger, #r-bigfinger{ výška: 50px; šírka: 20px; hraničný polomer: 50 %; Pozadie: #fff; pozícia: relatívna; hore: 250px; vľavo: 50px; transformovať: otočiť (-50°); } #r-bigfinger{ vľavo: 50px; transformovať: otočiť (50°); } #l-malý, #r-malý{ výška: 35px; šírka: 15px; hraničný polomer: 50 %; Pozadie: #fff; pozícia: relatívna; hore: 195px; vľavo: 66px; transformovať: otočiť (-40°); } #r-malý{ pozadie: #fff; transformovať: otočiť (40°); hore: 195px; vľavo: 37px; } /*stehno*/ #left-leg, #right-leg{ výška: 170px; šírka: 90px; hranicový polomer: 40 % 30 % 10 px 45 %; Pozadie: #fff; pozícia: relatívna; hore: -640px; vľavo: -45px; transformovať: otočiť (-1°); z-index: -2; Rozdiel: 0 auto; } #right-leg{ pozadie: #fff; hranicový polomer: 30% 40% 45% 10px; Rozdiel: 0 auto; hore: -810px; vľavo: 50px; transformovať: otočiť (1 stupeň); </style><body> } <div id="baymax">  <div id="hlava"> <div id="oko"></div> <div id="eye2"></div> <div id="ústa"></div> </div>  <div id="torzo"> <div id="srdce"></div> </div>  <div id="brucho"> <div id="cover"></div> </div>  <div id="ľavá ruka"> <div id="l-bigfinger"></div> <div id="l-littlefinger"></div> </div>  <div id="pravá ruka"> <div id="r-bigfinger"></div> <div id="r-smallfinger">  <div id="ľavú nohu"></div>  <div id="pravá noha"></div> </div></body><html>

QWERTYU · Zverejnené 5. 12. 2017 9:10:05

Kód je možné upravovať

Admin · Zverejnené 5. 12. 2017 9:21:19

Dabai je dobrý

Vyriešil som kód

Prihlásenie je viditeľné.

[CSS/DIV] Nováčikovia hrajú s čiernou technológiou v CSS

Skóre

Zobrazené sekcie