Aj
1. Flytta musen in på webbsidan och den är borta = =
*{ markör: ingen!viktig; }2. Enkel textoskärpa-effekt
*{ färg: transparent; Text-Shadow: #111 0 0 5px; }![]()
3. Flera gränser
.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); Höjd: 200 px; marginal: 50px auto; bredd: 400px}![]()
4. Redigera CSS i realtid
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Enkla operationer i CSS
.div{ width: calc(100% - 500px); }![]()
6、gränsradie
För i princip använder många det så här:
.div { gränsradie: 4px; }![]()
Lite mer exklusivt är så här:
.div { gränsradie: 4px 6px 6px 4px; }![]()
Men så här används den ultimata svarta teknologin:
.div { gränsradius: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
Gränsradie Den kan tilldelas 8 värden:
Framsidan av snedstrecket påverkar den horisontella riktningen, och baksidan av snedstrecket påverkar den vertikala riktningen.
Varje siffra representerar fyra olika riktningar.
7、kontur-offset
När du skriver CSS under input kommer du att känna till följande påståenden:
input { disposition : ingen; }input:focus { disposition : ingen; Så här tar man bort den standard blå trådramen från inmatningsboxen.
Det finns också en disline-offset-egenskap i CSS där du kan ställa in avståndet till standardtrådramen:
input { kontur-offset: 4px ; }(Webbfront-end lärandeutbytesgrupp: 328058344 Inget småprat, gå inte in om du inte gillar det! Justera storleken på attributvärdet så kan du se avståndsförändringen på konturen.
Slutligen kommer jag att presentera en demonstration av den stora vita innan fakta
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> body { bakgrund: #595959; } #baymax{ /* är satt till center*/ marginal: 0 auto; /*höjd*/ höjd: 600px; /*göm överflöd*/ överflöd: gömd; } #head{ höjd: 64px; bredd: 100 px; /*Definiera formen på det rundade hörnet som en procentandel*/kantradie: 50%; /*bakgrund*/ bakgrund: #fff; marginal: 0 auto; marginal-botten: -20 px; /*Sätt stilen på den nedre kanten*/ kant-botten: 5px solid #e0e0e0; /*attributet anger staplingsordningen för element; Element med högre stackordning kommer alltid att ligga framför elementen med lägre stackordning*/ z-index: 100; /*Generera relativt placerade element*/ position: relativ; } #eye, #eye2{ bredd: 11px; Höjd: 13 px; Bakgrund: #282828; gränsradie: 50 %; Position: Släkt; topp: 30 px; vänster: 27px; /*rotera elementet*/transformera: rotera(8°); } #eye2{ /*Få den att rotera symmetriskt*/ transformera: rotera(-8°); vänster: 69px; Topp: 17 px; } #mouth{ bredd: 38px; Höjd: 1,5 px; Bakgrund: #282828; Position: Släkt; vänster: 34px; Topp: 10 px; } /*Torso och buk*/ #torso, #belly{ marginal: 0 auto; } Höjd: 200 px; bredd: 180px; Bakgrund: #fff; gränsradie: 47 %; /*Sätt ram*/ ram: 5px solid #e0e0e0; gränstopp: inga; Z-index: 1; } #belly{ höjd: 300px; bredd: 245 px; marginal-topp: -140 px; Z-index: 5; } #cover{ bredd: 190px; Bakgrund: #fff; Höjd: 150 px; marginal: 0 auto; Position: Släkt; Topp: -20 px; gränsradie: 50 %; } /*hjärta*/ #heart{ bredd:25px; höjd: 25 px; gränsradie: 50%; position: relativ; /*Lägg till skuggeffekter runt kanten*/ box-shadow:2px 5px 2px #ccc infällt; höger:-115px; topp:40px; Z-index: 111; Kant: 1 px solid #ccc; } /*arm*/ #left-arm, #right-arm{ höjd: 270px; bredd: 120px; gränsradie: 50 %; Bakgrund: #fff; marginal: 0 auto; Position: Släkt; Topp: -350 px; vänster: -100px; transformera: rotera (20 grader); Z-index: -1; } #right-arm{ transform: rotate(-20°); vänster: 100px; topp: -620 px; } /*finger*/ #l-bigfinger, #r-bigfinger{ höjd: 50px; bredd: 20px; gränsradie: 50 %; Bakgrund: #fff; Position: Släkt; Topp: 250 px; vänster: 50px; transformera: rotera (-50 grader); } #r-bigfinger{ vänster: 50px; transformera: rotera (50 grader); } #l-smallfinger, #r-smallfinger{ height: 35px; bredd: 15px; gränsradie: 50 %; Bakgrund: #fff; Position: Släkt; topp: 195 px; vänster: 66px; transform: rotera (-40 grader); } #r-smallfinger{ bakgrund: #fff; transformera: rotera (40 grader); topp: 195 px; vänster: 37px; } /*lår*/ #left-ben, #right-ben{ höjd: 170px; bredd: 90px; Gränsradie: 40 % 30 % 10 px 45 %; Bakgrund: #fff; Position: Släkt; topp: -640px; vänster: -45 px; transformera: rotera (-1 grad); Z-index: -2; marginal: 0 auto; } #right-ben{ bakgrund: #fff; Border-Radius: 30% 40% 45% 10px; marginal: 0 auto; Topp: -810 px; vänster: 50px; transform: rotera (1 grad); </style><body> } <div id="baymax"> <!-- Definiera huvudet, inklusive två ögon, mun --> <div id="huvud"> <div id="öga"></div> <div id="eye2"></div> <div id="mun"></div> </div> <!-- Definiera bålen, inklusive hjärtat --> <div id="torso"> <div id="hjärta"></div> </div> <!-- Definiera buken, buken, inklusive täcket (och övergången på bålen) --> <div id="buk"> <div id="skydd"></div> </div> <!-- Definiera vänster arm, inklusive två fingrar, ett stort och ett litet --> <div id="vänster-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- Definiera höger arm, som också inkluderar ett stort och ett litet finger --> <div id="right-arm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- definierar vänster ben --> <div id="left-leg"></div> <!-- definierar höger ben --> <div id="höger-ben"></div> </div></body><html>![]()
|
Publicerad på 2017-12-04 20:24:39
|
|
|
|
Publicerad på 2017-12-05 09:10:05
|
Publicerad på 2017-12-05 09:21:19
