Nováčci hrají v CSS trochu černošské technologie

fanxiaolin84 · Zveřejněno 04.12.2017 20:24:39

Au
1. Přesunete myš na webovou stránku a zmizí = =
*{ kurzor: žádný! důležitý; }2. Jednoduchý efekt rozmazání textu
*{ barva: průhledná; text-shadow: #111 0 0 5px; }
3. Více hranic
.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; Šířka: 400px}
4. Upravovat CSS v reálném čase
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Jednoduché operace v CSS
.div{ šířka: calc(100 % - 500px); }
6、Hranice
Protože v podstatě mnoho lidí to používá takto:
.div { okrajový poloměr: 4px; }
Trochu vyšší třída je taková:
.div { okrajový poloměr: 4px 6px 6px 4px; }
Takto se však používá ultimátní černá technologie:
.div { okrajový poloměr: 5px 5px 3px 2px / 5px 5px 1px 3px; }

hranice a poloměr Lze mu přiřadit 8 hodnot:
Přední část lomení ovlivňuje horizontální směr a zadní strana lomení vertikální směr.
Každé číslo představuje čtyři různé směry.

7、Outline-offset
Při psaní CSS pod vstupem budete obeznámeni s následujícími tvrzeními:
vstup { outline : none; }input:focus { outline : none; Takto odstranit výchozí modrý wireframe z vstupního boxu.
V CSS je také vlastnost outline-offset, kde můžete nastavit vzdálenost výchozího wireframu:
vstup { outline-offset: 4px ; }(Webová front-end výměnná skupina: 328058344 Žádné malé řeči, nevstupujte, pokud se vám to nelíbí! Upravte velikost hodnoty atributu a uvidíte změnu vzdálenosti obrysu.
Nakonec vám představím ukázku velkého bílého před fakty
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> tělo { pozadí: #595959; } #baymax{ /* je nastaveno na střed*/ margin: 0 auto; /*výška*/ výška: 600px; /*skrýt přetečení*/ přetečení: skryté; } #head{ výška: 64px; šířka: 100px; /*Definujte tvar zaobleného rohu jako procento*/poloměr okraje: 50 %; /*pozadí*/ pozadí: #fff; Rozdíl: 0 auto; Okraj – spodní část: -20px; /*Nastavte styl spodního okraje*/ spodní okraj: 5px pevný #e0e0e0; /*atribut nastavuje pořadí skládání prvků; Prvky s vyšším pořadím zásobníku budou vždy před prvky s nižším pořadím zásobníku*/ z-index: 100; /*Generovat relativně umístěné prvky*/ pozice: relativní; } #eye, #eye2{ šířka: 11px; Výška: 13px; Pozadí: #282828; Okrajový poloměr: 50 %; pozice: relativní; nahoře: 30px; vlevo: 27px; /*rotujte prvek*/transformujte: rotujte (8 stupňů); } #eye2{ /*Otočit symetricky*/ transformovat: rotovat(-8°); vlevo: 69px; top: 17px; } #mouth{ šířka: 38px; Výška: 1,5 px; Pozadí: #282828; pozice: relativní; vlevo: 34px; top: 10px; } /*Trup a břicho*/ #torso, #belly{ margin: 0 auto; } Výška: 200px; šířka: 180px; Pozadí: #fff; poloměr hranice: 47 %; /*Nastavit rám*/ rám: 5px pevný #e0e0e0; Okraj: žádná; z-index: 1; } #belly{ výška: 300px; šířka: 245px; horní okraj: -140px; z-index: 5; } #cover{ šířka: 190px; Pozadí: #fff; Výška: 150px; Rozdíl: 0 auto; pozice: relativní; Top: -20px; Okrajový poloměr: 50 %; } /*heart*/ #heart{ šířka:25px; Výška: 25px; hranice-poloměr: 50 %; pozice: relativní; /*Přidat stínové efekty kolem okraje*/ box-shadow: 2px 5px 2px 2px #ccc vložené; vpravo: -115px; top: 40px; z-index:111; Rámeček: 1 px pevná #ccc; } /*paž*/ #left-paže, #right-paže{ výška: 270px; šířka: 120px; Okrajový poloměr: 50 %; Pozadí: #fff; Rozdíl: 0 auto; pozice: relativní; nahoře: -350px; vlevo: -100px; transformovat: otočit (20°); z-index: -1; } #right-arm{ transform: rotate(-20°); vlevo: 100px; nahoře: -620px; } /*finger*/ #l-bigfinger, #r-bigfinger{ výška: 50px; šířka: 20px; Okrajový poloměr: 50 %; Pozadí: #fff; pozice: relativní; TOP: 250px; vlevo: 50px; transformovat: otočit (-50°); } #r-bigfinger{ vlevo: 50px; transformovat: otočit (50 stupňů); } #l-malý, #r-malý/prst{ výška: 35px; šířka: 15px; Okrajový poloměr: 50 %; Pozadí: #fff; pozice: relativní; Top: 195px; vlevo: 66px; transformovat: otočit (-40°); } #r-malýček{ pozadí: #fff; transformovat: otočit (40°); Top: 195px; vlevo: 37px; } /*stehno*/ #left-noha, #right-noha{ výška: 170px; šířka: 90px; Okrajový poloměr: 40 % 30 % 10 px 45 %; Pozadí: #fff; pozice: relativní; nahoře: -640px; vlevo: -45px; transformovat: rotovat (-1°); z-index: -2; Rozdíl: 0 auto; } #right-leg{ pozadí: #fff; hranice: 30 % 40 % 45 % 10 px; Rozdíl: 0 auto; TOP: -810px; vlevo: 50px; transformovat: otočit (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="torso"> <div id="heart"></div> </div>  <div id="belly"> <div id="cover"></div> </div>  <div id="levá ruka"> <div id="l-bigfinger"></div> <div id="l-littlefinger"></div> </div>  <div id="pravá ruka"> <div id="r-bigfinger"></div> <div id="r-malýprst">  <div id="levá noha"></div>  <div id="pravá noha"></div> </div></body><html>

QWERTYU · Zveřejněno 05.12.2017 9:10:05

Kód lze upravovat

Admin · Zveřejněno 05.12.2017 9:21:19

Dabai je dobrý

Vyřešeno kód

Přihlášení je viditelné.

[CSS/DIV] Nováčci hrají v CSS trochu černošské technologie

Partitura

Prohlížené sekce