Algajad mängivad CSS-is musta tehnoloogiat

fanxiaolin84 · Postitatud 04.12.2017 20:24:39

Auts
1. Liiguta hiir veebilehele ja see kaob = =
*{ kursor: puudub!oluline; }2. Lihtne teksti hägususe efekt
*{ värv: läbipaistev; text-shadow: #111 0 0 5px; }
3. Mitmed piirid
.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); kõrgus: 200px; : 50px automaat; laius: 400px}
4. Muuda CSS-i reaalajas
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Lihtsad operatsioonid CSS-is
.div{ laius: kalkulus (100% - 500px); }
6、piiriraadius
Sest põhimõtteliselt paljud inimesed kasutavad seda nii:
.div { piiriraadius: 4px; }
Veidi kõrgema klassi variant on selline:
.div { piiriraadius: 4px 6px 6px 4px; }
Kuid just nii kasutatakse ülimat musta tehnoloogiat:
.div { piiriraadius: 5px 5px 3px 2px / 5px 5px 1px 3px; }

piiriraadius Sellele saab määrata 8 väärtust:
Kaldkriipsu esikülg mõjutab horisontaalset suunda ja tagumine külg vertikaalset suunda.
Iga number tähistab nelja erinevat suunda.

7、kontuur-nihe
CSS-i kirjutades sisendi all, oled tuttav järgmiste väidetega:
sisend { ülevaade : puudub; }input:focus { kontuur : puudub; Nii eemaldatakse vaikimisi sinine traadiraam sisendkastist.
CSS-is on ka kontuur-nihke omadus, kus saab määrata vaikimisi wireframe'i kauguse:
sisend { kontuur-nihe: 4px ; }(Veebifront-end õppevahetusgrupp: 328058344 Ei mingit väikest vestlust, ära osale, kui sulle ei meeldi! Kohanda atribuudi väärtuse suurust ja näed kontuuri kauguse muutust.
Lõpuks esitan enne fakte suure valge demo
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> body { taust: #595959; } #baymax{ /* on seatud keskmesse*/ marginaal: 0 automaatne; /*kõrgus*/ kõrgus: 600px; /*peida ületäitu*/ ülevoola: peidetud; } #head{ kõrgus: 64px; laius: 100px; /*Määratle ümardatud nurga kuju protsendina*/piiriraadius: 50%; /*taust*/ taust: #fff; Marginaal: 0 automaatne; marginaal all: -20px; /*Sea alumise ääre stiil*/ ääris-ala: 5px solid #e0e0e0; /*atribuut määrab elementide virnastamise järjekorra; Elemendid, millel on kõrgem virnajärjekord, asuvad alati madalama virnajärjekorraga*/ z-indeksiga elementide ees; /*Genereeri suhteliselt positsioneeritud elemendid*/ positsioon: suhteline; } #eye, #eye2{ laius: 11px; Kõrgus: 13px; Taust: #282828; piiriraadius: 50%; positsioon: suhteline; ülemine: 30px; vasakul: 27px; /*rotate element*/transform: rotate(8°); } #eye2{ /*Pööra sümmeetriliselt*/ teisenda: pööra(-8 kraadi); vasakul: 69px; ülemine osa: 17px; } #mouth{ laius: 38px; kõrgus: 1,5px; Taust: #282828; positsioon: suhteline; vasak: 34px; ülemine: 10px; } /*Torso ja kõht*/ #torso, #belly{ marginaal: 0 automaat; } kõrgus: 200px; laius: 180px; Taust: #fff; piiriraadius: 47%; /*Seatud ääre*/ ääris: 5px tahke #e0e0e0; ääretipp: puudub; z-indeks: 1; } #belly{ kõrgus: 300px; laius: 245px; marginaal: -140px; z-indeks: 5; } #cover{ laius: 190px; Taust: #fff; kõrgus: 150px; Marginaal: 0 automaatne; positsioon: suhteline; tipp: -20px; piiriraadius: 50%; } /*süda*/ #heart{ width:25px; kõrgus: 25px; piiriraadius: 50%; positsioon: suhteline; /*Lisa varjuefektid ümber piiri*/ box-shadow:2px 5px 2px #ccc sisse seatud; paremal:-115px; top:40px; z-indeks:111; ääris: 1px kindel #ccc; } /*käsi*/ #left-käsi, #right-käsi{ kõrgus: 270px; Laius: 120px; piiriraadius: 50%; Taust: #fff; Marginaal: 0 automaatne; positsioon: suhteline; ülemine: -350px; vasakul: -100px; teisenda: pööra (20 kraadi); z-indeks: -1; } #right-käsi{ teisendus: pööra(-20°C); vasakul: 100px; ülemine: -620px; } /*sõrm*/ #l-suur sõrm, #r-suur sõrm{ kõrgus: 50px; laius: 20px; piiriraadius: 50%; Taust: #fff; positsioon: suhteline; ülemine osa: 250px; vasakul: 50px; teisenda: pöörab (-50 kraadi); } #r-bigfinger{ vasakul: 50px; teisenda: pööra (50 kraadi); } #l-väikesõrm, #r-väikesõrm{ kõrgus: 35px; laius: 15px; piiriraadius: 50%; Taust: #fff; positsioon: suhteline; ülemine: 195px; vasakul: 66px; teisenda: pöörab (-40 kraadi); } #r-väikesõrm{ taust: #fff; teisenda: pöörab (40 kraadi); ülemine: 195px; vasakul: 37px; } /*reie*/ #left-jalg, #right-jalg{ pikkus: 170px; laius: 90px; piiriraadius: 40% 30% 10px 45%; Taust: #fff; positsioon: suhteline; tipp: -640px; vasakul: -45px; teisenda: pööra(-1 kraadi); z-indeks: -2; Marginaal: 0 automaatne; } #right-jalg{ taust: #fff; piiriraadius: 30% 40% 45% 10px; Marginaal: 0 automaatne; ülemine: -810px; vasakul: 50px; teisenda: pööra(1 kraadi); </style><body> } <div id="baymax">  <div id="pea"> <div id="eye"></div> <div id="eye2"></div> <div id="mouth"></div> </div>  <div id="torso"> <div id="heart"></div> </div>  <div id="belly"> <div id="kate"></div> </div>  <div id="vasak käsi"> <div id="l-suursõrm"></div> <div id="l-väikesõrm"></div> </div>  <div id="parem käsi"> <div id="r-suursõrm"></div> <div id="r-väikesõrm"></div> </div>  <div id="vasak jalg"></div>  <div id="right-leg"></div> </div></body><html>

QWERTYU · Postitatud 05.12.2017 09:10:05

Koodi saab muuta

Admin · Postitatud 05.12.2017 09:21:19

Dabai on hea

Koodi korda sain

Sisselogimine on nähtav.

[CSS/DIV] Algajad mängivad CSS-is musta tehnoloogiat

Skoor

Vaadatud sektsioonid