CSS reunanmuoto

Tämä elementti omaa mustan reunan ja sinisen reunavärin, leveydeltään 10px.

CSS reunanmuoto

Reunat ovat yksi linja, joka piirretään elementin ympärille, reunan ulkopuolelle, korostaakseen elementtiä.

CSS:llä on seuraavat reunaväriominaisuudet:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Huomioitavaa:Reunat jaReunatEri! Ero on siinä, että reunat piirretään elementin reunan ulkopuolelle ja ne voivat ristiriidassa muiden sisällön kanssa. Samoin, reunat eivät ole osa elementin kokoa; elementin kokonaisleveys ja korkeus eivät vaikuta reunaviivan leveyteen.

CSS-reunaväri

outline-style-ominaisuus määrittää reunavärin tyylin ja voi asettaa seuraavat arvot:

  • dotted - Määritä pisteinen reunaväri.
  • dashed - Määritä viivainen reunaväri.
  • solid - Määritä täysin täytetty reunaväri.
  • double - Määritä kaksoisreunaväri.
  • groove - Määritä 3D:n syvä reuna-kuoppa.
  • ridge - Määritä 3D:n korostettu reuna-kuoppa.
  • inset - Määritä 3D:n syvä reunaväri.
  • outset - Määritä 3D:n korostettu reunaväri.
  • none - Määritä ei-reunaa.
  • hidden - Määritä piilotettu reuna.

Seuraavassa esimerkissä näytetään erilaisia outline-style-arvoja:

Esimerkki

Esimerkki erilaisista reunavärisyyleistä:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Tulos:

Pisteinen ulkoreunus.

Kaksihaarainen ulkoreunus.

Täysiverinen ulkoreunus.

Kaksirivinen ulkoreunus.

3D syvikuva reuna. Tämä vaikutus riippuu outline-color arvosta.

3D kohokuva reuna. Tämä vaikutus riippuu outline-color arvosta.

3D syvikuva ulkoreunus. Tämä vaikutus riippuu outline-color arvosta.

3D kohokuva ulkoreunus. Tämä vaikutus riippuu outline-color arvosta.

Kokeile itse!

Huomioitavaa:Ellei ole asetettu outline-style Ominaisuus, muuten muut ulkoreunusominaisuudet (jotka selitetään seuraavassa luvussa) eivät vaikuta mihinkään!