CSS Academy · Oppitunti

Reunaviivojen tyylit, leveys ja väri

Lisäätte reunaviivoja eri tyyleillä, leveyksillä ja väreillä käyttäen lyhyt- ja pitkää ominaisuusmuotoa.

Oppitunti 2/413 vaihetta

Reunaviivojen tyylit, leveys ja väri on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

border-lyhytmerkintä

border-lyhytmerkintä määrittää kaikki neljä sivua kerralla: leveyden, tyylin ja värin.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

border-style-arvot

border-style on määritettävä, jotta reunus näkyy. Käytettävissä olevat arvot:

solid — yhtenäinen viiva
dashed — pitkät katkoviivat
dotted — pyöreät pisteet
double — kaksi rinnakkaista viivaa
groove/ridge/inset/outset — 3D-tehosteet
none — ei reunusta (oletus)

border-width

border-width hyväksyy minkä tahansa pituusyksikön tai avainsanat thin, medium ja thick. Käyttäkää numeroarvoja tarkkaan määrittämiseen.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

border-color hyväksyy minkä tahansa CSS-värin, mukaan lukien läpinäkyvyyttä tukevan RGBA-värin. currentColor perii tekstin värin.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Sivukohtaiset reunukset

Määrittäkää reunukset tietyille sivuille pitkän muodon ominaisuuksilla:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

border-radius pyöristää elementin kulmat. Käyttäkää yhtä arvoa tasaiseen pyöristykseen tai enintään neljää arvoa kulmakohtaiseen hallintaan.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

Elliptinen border-radius

Jokaiselle kulman säteelle voidaan antaa kaksi arvolla / erotettua arvoa epäsymmetristä elliptistä pyöristystä varten:

<div class="leaf"></div>

border-image

border-image korvaa reunuksen viipaloidulla kuvalla tai liukuvärillä, mikä mahdollistaa koristeelliset reunukset:

<div class="fancy">Gradient border image</div>

outline ja border

outline piirtää viivan reunuksen ulkopuolelle. Toisin kuin reunus, se ei vaikuta asetteluun tai elementin mittoihin. Sitä käytetään yleisesti näppäimistökohdistuksen ilmaisimena.

<button class="focus-demo">Focused Button (demo)</button>

Outline-reunuksen poistaminen: käyttäkää harkiten

Älkää koskaan poistako :focus-tilan outline-reunuksia tarjoamatta vaihtoehtoista näkyvää kohdistuksen ilmaisinta. Kohdistustyylien poistaminen haittaa näppäimistöä ja ruudunlukijaa käyttäviä henkilöitä.

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse taulukoissa

HTML-taulukoissa border-collapse: collapse yhdistää vierekkäisten solujen reunukset yhdeksi viivaksi, jolloin ulkoasusta tulee selkeämpi.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Pikatarkistus

Mikä CSS-ominaisuus piirtää viivan reunuksen ulkopuolelle vaikuttamatta elementin asetteluun?

Vastaa interaktiivisessa oppitunnissa

Kertaus

border-lyhytmerkintä määrittää leveyden, tyylin ja värin. border-radius pyöristää kulmat. outline on erillinen reunuksesta: se ei vaikuta asetteluun ja on tärkeä näppäimistökäyttäjien kohdistuksen ilmaisimena.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Reunaviivojen tyylit, leveys ja väri” ilmainen?

Kyllä – oppitunnin ”Reunaviivojen tyylit, leveys ja väri” 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 ”Reunaviivojen tyylit, leveys ja väri”?

Lisäätte reunaviivoja eri tyyleillä, leveyksillä ja väreillä käyttäen lyhyt- ja pitkää ominaisuusmuotoa. 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 2/4.

Kuinka kauan ”Reunaviivojen tyylit, leveys ja väri”-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

← Takaisin: CSS Academy