Auts
1. Siirrä hiiri verkkosivulle, ja se on poissa = =
*{ kursori: ei!tärkeä; }2. Yksinkertainen tekstin sumennusefekti
*{ väri: läpinäkyvä; teksti-varjo: #111 0 0 5px; }![]()
3. Useat rajat
.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); korkeus: 200px; marginaali: 50px automaatti; leveys: 400px}![]()
4. Muokkaa CSS:ää reaaliajassa
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Yksinkertaiset operaatiot CSS:ssä
.div{ leveys: calc(100 % - 500px); }![]()
6、rajasäde
Koska periaatteessa monet käyttävät sitä näin:
.div { rajasäde: 4px; }![]()
Hieman enemmän huippuluokkaa on tämä:
.div { rajasäde: 4px 6px 6px 4px; }![]()
Kuitenkin näin käytetään täydellistä mustaa teknologiaa:
.div { rajasäde: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
reunasäde Sille voidaan antaa 8 arvoa:
Viivon etuosa vaikuttaa vaakasuuntaan ja takapuoli pystysuuntaan.
Jokainen numero edustaa neljää eri suuntaa.
7、outline-offset
Kun kirjoitat CSS:ää syötteen alla, tunnet seuraavat väitteet:
input { outline : ei mitään; }input:focus { outline : none; Näin poistat oletussinisen lankakehyslaitteen tulokotelosta.
CSS:ssä on myös outline-offset-ominaisuus, jossa voit asettaa oletuslankakehyksen etäisyyden:
syöttö { ääriviiva-offset: 4px ; }(Verkkofront-end oppimisen vaihtoryhmä: 328058344 Ei small talkia, älä osallistu ellet pidä siitä! Säädä attribuutin arvon kokoa, niin näet ääriviivojen etäisyyden muutoksen.
Lopuksi esittelen demon isosta valkoisesta ennen faktoja
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> body { tausta: #595959; } #baymax{ /* on asetettu keskelle*/ marginaali: 0 automaatti; /*korkeus*/ korkeus: 600px; /*piilota ylivuoto*/ ylivuoto: piilotettu; } #head{ korkeus: 64px; leveys: 100px; /*Määrittele pyöristetyn kulman muoto prosenttiosuutena*/reunasäde: 50 %; /*tausta*/ tausta: #fff; marginaali: 0 automaattista; marginaalin pohja: -20px; /*Aseta alareunan tyyli*/ reuna-ala: 5px kiinteä #e0e0e0; /*attribuutti määrittää alkioiden pinoutumisjärjestyksen; Alkiot, joilla on korkeampi pinojärjestys, ovat aina alkioiden edessä, joilla on alempi pinojärjestys*/ z-indeksi: 100; /*Luo suhteelliset sijoitetut alkiot*/ paikka: suhteellinen; } #eye, #eye2{ leveys: 11px; korkeus: 13px; Tausta: #282828; rajasäde: 50 %; Asema: suhteellinen; yläosa: 30px; vasen: 27px; /*rotate the element*/transform: rotate(8degree); } #eye2{ /*Käännä symmetrisesti*/ muunna: pyöri(-8 astetta); vasen: 69px; Yläosa: 17px; } #mouth{ leveys: 38px; korkeus: 1,5px; Tausta: #282828; Asema: suhteellinen; vasen: 34px; yläosa: 10px; } /*Vartalo ja vatsa*/ #torso, #belly{ marginaali: 0 auto; } korkeus: 200px; leveys: 180px; Taustaa: #fff; rajasäde: 47 %; /*Aseta reuna*/ reunus: 5px kiinteä #e0e0e0; reuna-yläosa: ei yhtään; z-indeksi: 1; } #belly{ korkeus: 300px; leveys: 245px; marginaalin yläosa: -140px; z-indeksi: 5; } #cover{ leveys: 190px; Taustaa: #fff; korkeus: 150px; marginaali: 0 automaattista; Asema: suhteellinen; ylintä: -20px; rajasäde: 50 %; } /*sydän*/ #heart{ leveys:25px; korkeus: 25px; rajasäde: 50 %; sijainti: suhteellinen; /*Lisää varjoefektejä reunuksen ympärille*/ box-shadow:2px 5px 2px #ccc inset; oikealla:-115px; huippu:40px; z-indeksi:111; raja: 1px kiinteä #ccc; } /*käsi*/ #left-käsivarsi, #right-käsi{ korkeus: 270px; leveys: 120px; rajasäde: 50 %; Taustaa: #fff; marginaali: 0 automaattista; Asema: suhteellinen; Yläosa: -350px; vasen: -100px; muunnos: pyöri (20 astetta); z-indeksi: -1; } #right-arm{ muunnos: pyöri(-20 astetta); vasen: 100px; Yläosa: -620px; } /*sormi*/ #l-isosormi, #r-isosormi{ korkeus: 50px; leveys: 20px; rajasäde: 50 %; Taustaa: #fff; Asema: suhteellinen; Yläosa: 250px; vasen: 50px; muunnos: pyöri (-50 astetta); } #r-isosormi{ vasemmalla: 50px; muunnos: pyöri (50 astetta); } #l-pikkusormi, #r-pikkusormi{ korkeus: 35px; leveys: 15px; rajasäde: 50 %; Taustaa: #fff; Asema: suhteellinen; ylin: 195px; vasen: 66px; muunnos: pyöri (-40 astetta); } #r-smallfinger{ tausta: #fff; muunnos: pyöri (40 astetta); ylin: 195px; vasen: 37px; } /*reisi*/ #left-jalka, #right-jalka{ korkeus: 170px; leveys: 90px; rajasäde: 40 % 30 % 10 px 45 %; Taustaa: #fff; Asema: suhteellinen; Yläosa: -640px; vasen: -45px; muunnos: pyöri (-1 aste); z-indeksi: -2; marginaali: 0 automaattista; } #right-jalka{ tausta: #fff; rajasäde: 30 % 40 % 45 % 10px; marginaali: 0 automaattista; Yläosa: -810px; vasen: 50px; muunnos: pyöri (1 aste); </style><body> } <div id="baymax"> <!-- Määrittele pää, mukaan lukien kaksi silmää, suu --> <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="mouth"></div> </div> <!-- Määrittele runko, mukaan lukien sydän --> <div id="torso"> <div id="sydän"></div> </div> <!-- Määrittele vatsa, vartalo, mukaan lukien suoja (ja vartalon liitoskohta) --> <div id="vatsa"> <div id="peite"></div> </div> <!-- Määrittele vasen käsivarsi, johon kuuluu kaksi sormea, yksi iso ja yksi pieni --> <div id="vasen käsi"> <div id="l-isosormi"></div> <div id="l-pieni sormi"></div> </div> <!-- Määrittele oikea käsivarsi, johon kuuluu myös yksi iso ja yksi pieni sormi --> <div id="oikea käsi"> <div id="r-isosormi"></div> <div id="r-smallfinger"></div> </div> <!-- määrittele vasen jalka --> <div id="vasen jalka"></div> <!-- määrittele oikea jalka --> <div id="oikea jalka"></div> </div></body><html>![]()
|
Julkaistu 4.12.2017 20.24.39
|
|
|
|
Julkaistu 5.12.2017 9.10.05
|
Julkaistu 5.12.2017 9.21.19
