Auw
1. Verplaats de muis naar de webpagina en hij is verdwenen = =
*{ cursor: geen!belangrijk; }2. Eenvoudig tekstvervagingseffect
*{ kleur: transparant; tekst-schaduw: #111 0 0 5px; }![]()
3. Meerdere grenzen
.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); Hoogte: 200px; marge: 50px auto; Breedte: 400px}![]()
4. CSS in realtime bewerken
<!DOCTYPE html><html> <body> <style style="display:block" contentBewerkbaar> body { color: blue } </style> </body></html>![]()
5. Eenvoudige bewerkingen in CSS
.div{ breedte: calc(100% - 500px); }![]()
6、grensstraal
Omdat veel mensen het eigenlijk zo gebruiken:
.div { grensstraal: 4px; }![]()
Iets meer high-end is als volgt:
.div { grensstraal: 4px 6px 6px 4px; }![]()
Maar zo wordt de ultieme zwarte technologie gebruikt:
.div { grensstraal: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
Grensstraal Er kan 8 waarden worden toegekend:
De voorkant van de snee beïnvloedt de horizontale richting, en de achterkant van de snee streep beïnvloedt de verticale richting.
Elk getal vertegenwoordigt vier verschillende richtingen.
7、omlijn-offset
Wanneer je CSS onder input schrijft, ben je vertrouwd met de volgende uitspraken:
invoer { overzicht : geen; }input:focus { outline : none; Zo verwijder je het standaard blauwe wireframe uit de invoerbox.
Er is ook een outline-offset eigenschap in CSS waarmee je de afstand van het standaard wireframe kunt instellen:
invoer { omtrek-offset: 4px ; }(Web front-end leeruitwisselingsgroep: 328058344 Geen smalltalk, kom niet binnen tenzij je het leuk vindt! Pas de grootte van de attribuutwaarde aan en je kunt de afstandsverandering van de omtrek zien.
Tot slot zal ik een demonstratie presenteren van het grote witte wit voordat de feiten komen
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> body { achtergrond: #595959; } #baymax{ /* wordt op center*/ marge: 0 auto; /*hoogte*/ hoogte: 600px; /*verbergen overloop*/ overloop: verborgen; } #head{ hoogte: 64px; Breedte: 100px; /*Definieer de vorm van de afgeronde hoek als percentage*/randstraal: 50%; /*achtergrond*/ achtergrond: #fff; Marge: 0 auto; Marge-bodem: -20px; /*Stel de stijl van de onderste rand in*/ rand-onder: 5px effen #e0e0e0; /*attribuut bepaalt de stapelvolgorde van elementen; Elementen met een hogere stackorde zullen altijd voor de elementen met een lagere stackorde staan*/ z-index: 100; /*Genereer relatief gepositioneerde elementen*/ positie: relatief; } #eye, #eye2{ breedte: 11px; Lengte: 13px; Achtergrond: #282828; grensstraal: 50%; Positie: Relatief; boven: 30px; links: 27px; /*het element draaien*/transformeer: roteren(8°); } #eye2{ /*Laat het symmetrisch roteren*/ transformatie: rotate(-8°); links: 69px; boven: 17px; } #mouth{ breedte: 38px; Lengte: 1,5 px; Achtergrond: #282828; Positie: Relatief; links: 34px; top: 10px; } /*Torso en buik*/ #torso, #belly{ marge: 0 auto; } Hoogte: 200px; Breedte: 180px; Achtergrond: #fff; grensstraal: 47%; /*Stel de rand*/ rand: 5px solide #e0e0e0; Border-top: geen; z-index: 1; } #belly{ hoogte: 300px; Breedte: 245px; Marge boven: -140 px; z-index: 5; } #cover{ breedte: 190px; Achtergrond: #fff; Hoogte: 150px; Marge: 0 auto; Positie: Relatief; top: -20px; grensstraal: 50%; } /*hart*/ #heart{ breedte:25px; Hoogte: 25 pixels; grensstraal: 50%; positie: relatief; /*Voeg schaduweffecten toe rond de rand*/ box-shadow:2px 5px 2px #ccc inset; Rechts: -115px; top: 40px; z-index: 111; rand: 1 px massief #ccc; } /*arm*/ #left-arm, #right-arm{ hoogte: 270px; Breedte: 120px; grensstraal: 50%; Achtergrond: #fff; Marge: 0 auto; Positie: Relatief; Top: -350px; links: -100px; transformeren: roteren (20 graden); z-index: -1; } #right-arm{ transform: rotate(-20°); links: 100px; top: -620px; } /*vinger*/ #l-bigfinger, #r-bigfinger{ hoogte: 50px; breedte: 20px; grensstraal: 50%; Achtergrond: #fff; Positie: Relatief; top: 250px; links: 50px; transformeren: roteren (-50°); } #r-bigfinger{ links: 50px; transformeren: roteren (50°); } #l-smallfinger, #r-smallfinger{ height: 35px; Breedte: 15px; grensstraal: 50%; Achtergrond: #fff; Positie: Relatief; boven: 195px; links: 66px; transformatie: roteren (-40°); } #r-smallfinger{ achtergrond: #fff; transformeren: roteren (40°); boven: 195px; links: 37px; } /*dij*/ #left-benen, #right-been{ hoogte: 170px; Breedte: 90px; grens-straal: 40% 30% 10px 45%; Achtergrond: #fff; Positie: Relatief; top: -640px; links: -45px; transformeren: roteren (-1°); z-index: -2; Marge: 0 auto; } #right-leg{ achtergrond: #fff; grensstraal: 30% 40% 45% 10px; Marge: 0 auto; top: -810px; links: 50px; transformeren: roteren (1 grad); </style><body> } <div id="baymax"> <!-- Definieer het hoofd, inclusief twee ogen, mond --> <div id="hoofd"> <div id="oog"></div> <div id="eye2"></div> <div id="mond"></div> </div> <!-- Definieer de romp, inclusief het hart --> <div id="torso"> <div id="hart"></div> </div> <!-- Definieer de buik, buik, inclusief de bedekking (en de overgang van de romp) --> <div id="buik"> <div id="cover"></div> </div> <!-- Definieer de linkerarm, inclusief twee vingers, één grote en één kleine --> <div id="linkerarm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- Definieer de rechterarm, die ook één grote en één kleine vinger omvat --> <div id="rechterarm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- definieer linkerbeen --> <div id="linkerbeen"></div> <!-- definieer rechterbeen --> <div id="rechterbeen"></div> </div></body><html>![]()
|
Geplaatst op 04-12-2017 20:24:39
|
|
|
|
Geplaatst op 05-12-2017 09:10:05
|
Geplaatst op 05-12-2017 09:21:19
