Outline ja box-shadow
Lisäätte kohdistuskehykset ja varjotehosteet elementtien ympärille outline- ja box-shadow-ominaisuuksilla.
Outline ja box-shadow on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
outline-ominaisuus
outline piirtää viivan borderin ulkopuolelle. Se ei vaikuta asetteluun, joten ympäröivät elementit eivät siirry. Lyhyt merkintätapa vastaa borderin merkintätapaa: leveys, tyyli ja väri.
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset siirtää outlinea poispäin borderin reunasta. Positiiviset arvot siirtävät sitä ulospäin ja negatiiviset arvot sisäänpäin, jolloin syntyy leikkautumisen vaikutelma.
<button class="focus-demo">Keyboard-focused Button</button>
outline vs. border
Tärkeimmät erot:
- Outline ei vaikuta asettelun kulkuun
- Outlinea ei voi määrittää sivukohtaisesti (outline-topia ei ole)
- Outline voi olla muutakin kuin suorakulmainen (joissakin selaimissa se seuraa kohdistusrenkaan muotoa)
- Outline on aina borderin ulkopuolella
:focus-visible vs. :focus
Käytä näppäimistökohdistuksen renkaisiin ensisijaisesti :focus-visible-valitsinta. Se näyttää outlinen vain silloin, kun kohdistus on saatu näppäimistöllä, ei hiiren napsautuksella. Näin osoitinlaitteiden käyttäjät välttyvät ylimääräiseltä visuaaliselta hälyltä, mutta käytettävyys säilyy.
<button class="focus-demo">Keyboard focus vs mouse click</button>
box-shadowin perusteet
box-shadow lisää elementin ympärille varjotehosteen. Lyhyt merkintätapa on: offset-x, offset-y, blur-radius, spread-radius ja color.
<div class="card">Card with soft shadow</div>
box-shadow-arvojen selitykset
box-shadowin kukin arvo:
- offset-x: vaakasuuntainen siirtymä (negatiivinen = vasemmalle)
- offset-y: pystysuuntainen siirtymä (negatiivinen = ylöspäin)
- blur-radius: pehmeys (0 = terävä)
- spread-radius: varjon koon kasvattaminen tai pienentäminen
- color: varjon väri (RGBA on suositeltava)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
Sisäänpäin suuntautuva box-shadow
Lisää inset-avainsana, jos haluat piirtää varjon elementin sisäpuolelle ja luoda painetun tai upotetun vaikutelman.
<input class="input focus-demo" type="text" value="Focused input" />
Useita box-shadow-varjoja
Erota useat varjot toisistaan pilkuilla. Ne pinoutuvat edestä taakse:
<span class="badge">3</span>
box-shadow vs. filter: drop-shadow
box-shadow noudattaa vain laatikon muotoa. filter: drop-shadow() seuraa piirrettyä muotoa ja ottaa läpinäkyvyyden huomioon, joten se sopii erinomaisesti läpinäkyvällä taustalla varustettuihin PNG-kuvakkeisiin.
<div class="icon">★</div>
Korkeustaso järjestelmällä box-shadow
Material Designin kaltaiset järjestelmät määrittävät useita varjotasoja visuaalista korkeutta varten. Yhdistä CSS-muuttujat varjoarvoihin:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
box-shadowin tehokas animointi
box-shadowin animointi käynnistää uudelleenpiirron jokaisella kuvalla. Suorituskyvyn parantamiseksi animoi pseudo-elementin varjon opacity-arvoa tai käytä filter: drop-shadow()-suodatinta, joka voidaan koostaa erillisenä tasona.
Pikatarkistus
Mikä box-shadow-avainsana piirtää varjon elementin sisäpuolelle?
Kertaus
outline piirtää borderin ulkopuolelle vaikuttamatta asetteluun, joten käytä sitä kohdistusilmaisimiin. box-shadow lisää syvyysvaikutelman siirtymän, sumennuksen, levityksen ja värin avulla. Käytä inset-avainsanaa sisäisiin varjoihin. Useita varjoja voi kerrostaa pilkuilla eroteltuina.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Outline ja box-shadow” ilmainen?
Kyllä – oppitunnin ”Outline ja box-shadow” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Outline ja box-shadow”?
Lisäätte kohdistuskehykset ja varjotehosteet elementtien ympärille outline- ja box-shadow-ominaisuuksilla. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Outline ja box-shadow”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Leveyden, korkeuden, marginaalin ja täytteen ymmärtäminen
- Reunaviivojen tyylit, leveys ja väri
- Box-sizing: content-box ja border-box
- Outline ja box-shadow