CSS-reunat

CSS-reunat - erilliset reunat

Edellisessä luvussa olet nähnyt, että voit määrittää eri reunat jokaiselle puolelle.

CSS:ssa on myös joitakin ominaisuuksia, joita voidaan käyttää määrittämään jokainen reunus (ylä, oikea, alapuoli ja vasen):

Esimerkki

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Tulos:

Eri reunamustat

Kokeile itse

Eri reunamustat

Edellisen esimerkin tulos on sama:

Esimerkki

p {
  border-style: dotted solid;
}

Kokeile itse

Työskentelyperiaatteensa on tällainen:

Jos border-style Ominaisuudet asettavat neljä arvoa:

border-style: dotted solid double dashed;

  • Yläpuoli on viivallinen
  • Oikea puoli on täysjakaoinen
  • Alapuoli on kaksijakoinen
  • Vasen puoli on viivallinen

Jos border-style Ominaisuudet asettavat kolme arvoa:

border-style: dotted solid double;

  • Yläpuoli on viivallinen
  • oikea ja vasen reunaviiva on täysin
  • Alapuoli on kaksijakoinen

Jos border-style Ominaisuus asettaa kaksi arvoa:

border-style: dotted solid;

  • ylä- ja alapuolinen reunaviiva on viivottu
  • oikea ja vasen reunaviiva on täysin

Jos border-style Ominaisuus asettaa yhden arvon:

border-style: dotted;

  • Kaikki neljä reunaa ovat viivoja

Esimerkki

/* Neljä arvoa */
p {
  border-style: dotted solid double dashed; 
}
/* Kolme arvoa */
p {
  border-style: dotted solid double; 
}
/* Kaksi arvoa */
p {
  border-style: dotted solid; 
}
/* Yksi arvo */
p {
  border-style: dotted; 
}

Kokeile itse

esimerkissä käytetään border-style ominaisuus. Mutta border-width ja border-color Tämä pätee myös.