CSS-reunat

CSS reunatyylit

CSS reunus Ominaisuus mahdollistaa elementin reunuksen tyylin, leveyden ja värin määrittämisen.

Kaikilla reunilla on reunat.

Minulla on punainen alapuolinen reunus.

Minulla on kulmattomat reunat.

Minulla on sininen vasen reunus.

CSS reunatyylit

border-style Ominaisuus määrittää näytettävän reunustyylin.

Sallitut arvot:

  • pisteinen - Määritellään pisteinen reunus
  • viivainen - Määritellään viivainen reunus
  • yhtenäinen - Määritellään yhtenäinen reunus
  • kaksinkertainen - Määritellään kaksinkertainen reunus
  • koukero - Määritellään 3D koukero reunus. Vaikutus riippuu reunavärin arvosta
  • koukku - Määritellään 3D koukku reunus. Vaikutus riippuu reunavärin arvosta
  • sisainen - Määritellään 3D sisäinen reunus. Vaikutus riippuu reunavärin arvosta
  • eteinen - Määritellään 3D eteinen reunus. Vaikutus riippuu reunavärin arvosta
  • ei_reunaa - Määritellään reunus ilman reunaa
  • piilotettu - Määritellään piilotettu reunus

border-style Ominaisuus voi asettaa yhden tai neljä arvoa (ylempi, oikea, alapuoli, vasen reunus).

Esimerkki

Näytetään erilaisia reunatyylejä:

p.pisteinen { reunatyyla: pisteinen;}
p.viivainen { reunatyyla: viivainen;}
p.yhtenäinen { reunatyyla: yhtenäinen;}
p.kaksinkertainen { reunatyyla: kaksinkertainen;}
p.koukero { reunatyyla: koukero;}
p.koukku { reunatyyla: koukku;}
p.sisainen { reunatyyla: sisainen;}
p.eteinen { reunatyyla: eteinen;}
p.ei_reunaa { reunatyyla: ei_reunaa;}
p.piilotettu { reunatyyla: piilotettu;}
p.mix {border-style: dotted dashed solid double;}

Tulos:

Pisteitä sisältävä reunavara.

Viivamerkkinen reunavara.

Yksirivinen reunavara.

Kaksirivinen reunavara.

Kolmiomaisen reunojen reunavara. Tämä riippuu border-color arvosta.

Kourunmuotoinen reunavara. Tämä riippuu border-color arvosta.

3D inset reunavara. Tämä riippuu border-color arvosta.

3D outset reunavara. Tämä riippuu border-color arvosta.

Reunavaraa ei ole.

Reunavaran piilottaminen.

Yhdistetty reunavara.

Kokeile itse!

Huomioitavaa:Ellei asetettu border-style Ominaisuus, muuten muut CSS reunavaran ominaisuudet (jotka käsitellään seuraavassa luvussa) eivät vaikuta mitenkään!