CSS border-color ominaisuus

Määrittely ja käyttö

border-color -ominaisuus asettaa neljän reunaviivan värit. Tämä ominaisuus voi asettaa 1-4 väriä.

border-color -ominaisuus on lyhennetty ominaisuus, joka voi asettaa yhden elementin kaikkien reunaviivojen näkyvän osan väriä tai asettaa jokaiselle neljälle reunalle eri väriä. Katso seuraava esimerkki:

Esimerkki 1

border-color:red green blue pink;
  • Yläreunus on punainen
  • Oikea reunaviiva on vihreä
  • Alareunus on sininen
  • Vasen reunus on vaaleanpunainen

Esimerkki 2

border-color:red green blue;
  • Yläreunus on punainen
  • Oikea ja vasen reunus ovat vihreitä
  • Alareunus on sininen

Esimerkki 3

border-color:dotted red green;
  • Ylä- ja alareunat ovat punaisia
  • Oikea ja vasen reunus ovat vihreitä

Esimerkki 4

border-color:red;
  • Kaikki 4 reunaa ovat punaisia

Muista, että reunan tyyli ei voi olla none tai hidden, muuten reunaa ei näy.

Huomautus：Aseta aina border-style ominaisuus ennen border-color ominaisuutta. Elementti on saattava saada reunan ennen kuin sitä muutetaan väriä.

Katso myös：

CSS -opetus：CSS reunat

HTML DOM -viittausoppikirja：borderColor ominaisuus

Esimerkki

Aseta 4 reunan väriä：

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

Kokeile itse

CSS-kieli

border-color: color|transparent|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
color_name Määritellään arvon väri nimellä oleva reunaväri (esim. red).
hex_number Määritellään arvon heksadesimaalimuodossa oleva reunaväri (esim. #ff0000).
rgb_number Määritellään rgb-koodeilla olevan arvon reunaväri (esim. rgb(255,0,0)).
transparent Oletusarvo. Reunaväri on läpinäkyvä.
inherit Määritellään, että reunaväri tulisi periä vanhemmalta elementiltä.

Tekninen yksityiskohta

Oletusarvo： ei määritelty
Perinnäisyys： ei määritelty
Versio： CSS1
JavaScript-kieli： object.style.borderColor="#FF0000 blue"

Lisää esimerkkejä

Aseta neljän reunan väri
Tämä esimerkki näyttää, miten asetetaan neljän reunan väri. voidaan asettaa yksi tai neljä väriä.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Huomautus：Internet Explorer 6 (ja aikaisemmat versiot) eivät tue ominaisuuden arvoa "transparent".

Huomautus：IE7 ja aikaisemmat selaimet eivät tue arvoa "inherit". IE8 vaatii !DOCTYPE. IE9 tukee "inherit".