CSS border-block-color ominaisuus

Edellinen sivu border-block
Seuraava sivu border-block-end

Määrittely ja käyttö

border-block-color Ominaisuuden asettaminen elementin reunan väriin lohkossa.

Huomaa:Jotta border-block-color Ominaisuuden toiminnan aktivoimiseksi on asetettava border-block-style.

border-block-color Ominaisuuden arvon voi asettaa eri tavoin:

Jos border-block-color Ominaisuudella on kaksi arvoa:

border-block-color: pink lightblue;

reunuksen alkupisteen reunaväri on pinkki
reunuksen loppupisteen reunaväri on lightblue

Jos border-block-color ominaisuudella on yksi arvo:

border-block-color: pink;

Reunuksen alkupiste ja loppupiste ovat molemmat pinkkiä

CSS:n border-block-color ominaisuudet ovat border-bottom-color,border-left-color,border-right-color ja border-top-color Ominaisuudet ovat hyvin samanlaisia, mutta border-block-color Ominaisuus riippuu reunan suunnasta.

Huomaa:liittyviin CSS-ominaisuuksiin writing-mode Määrittää reunan suunnan. Tämä vaikuttaa reunan alkupisteeseen ja loppupisteeseen sekä border-block-color Ominaisuuden tuloksena. English pagesillä sisäinen suunta on vasemmalta oikealle, reunan suunta on alas.

Esimerkki

Esimerkki 1

Aseta reunaväri reunan suuntaan:

#example1 {
  border-block-style: solid;
  border-block-color: pink;
}
#example2 {
  border-block-style: solid;
  border-block-color: pink lightblue;
}

Kokeile itse

Esimerkki 2: writing-mode-ominaisuuden yhdistäminen

Reunuksen suuntaan kulkevien reunavärien alkupiste ja loppupiste riippuvat writing-mode-ominaisuudesta:

div {
  writing-mode: vertical-rl;
  border-block-color: sininen;
}

Kokeile itse

CSS-kieli

border-block-color: väri|läpinäkyvä|initial|inherit;

Ominaisuuden arvo

Arvo	Kuvaus
väri	Määritä reunaväri. Oletusväri on elementin nykyvä väri. Tarkista CSS-värit saadaksesi täydellisen värilistan.
läpinäkyvä	Määritä reunaväri tulisi olla läpinäkyvä.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Peri tämän ominaisuuden arvon isältä elementiltä. Katso: inherit.

Tekninen tarkistus

Oletusarvo:	Elementin nykyvä väri
Perintä:	Ei
Animaation tekeminen:	Tuki. Katso:Animaatiot.
Versio:	CSS3
JavaScript-kieli:	object.style.borderBlockColor="pink"