CSS border-inline-color ominaisuus

Edellinen sivu border-inline
Seuraava sivu border-inline-end

Määrittely ja käyttö

border-inline-color ominaisuus määrittää elementin rivin suuntaisen reunavärin.

Huomioitavaa:halutaan asettaa border-inline-color ominaisuus tulee voimaan, kun border-inline-style.

border-inline-color Ominaisuuden arvo voidaan asettaa eri tavoin:

Jos border-inline-color ominaisuudella on kaksi arvoa:

border-inline-color: vaaleanpunainen sininen;

rivin alkupuolen reunaväri on vaaleanpunainen
rivin loppupuolen reunaväri on sininen

Jos border-inline-color ominaisuudella on yksi arvo:

border-inline-color: blue;

Rivin alkupuolen ja loppupuolen reunavärit ovat sinisiä

CSS:n border-inline-color ominaisuus ja border-bottom-color,border-left-color,border-right-color ja border-top-color Ominaisuudet ovat hyvin samanlaisia, mutta border-inline-color Ominaisuus riippuu suoraan ulospäin suuntaan.

Huomioitavaa:liittyvät CSS-ominaisuudet writing-mode,text-orientation ja direction Määrittää suoraan ulospäin suuntaan. border-inline-color Ominaisuuden vaikutus. Englanninkielisillä sivuilla suora ulospäin suuntaan on vasemmalta oikealle, lohkovirran suunta on alas.

Esimerkki

Esimerkki 1

Aseta reunaväri suoraan ulospäin suuntaan:

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

Kokeile itse

Esimerkki 2: Yhdistä writing-mode-ominaisuus

Reunuksen alkupiste ja loppupiste suoraan ulospäin suuntaan writing-mode Ominaisuuden vaikutus:

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-color: blue;
}

Kokeile itse

Esimerkki 3: Yhdistä direction-ominaisuus

Reunuksen alkupiste ja loppupiste suoraan ulospäin suuntaan direction Ominaisuuden vaikutus:

div {
  direction: rtl;
  border-inline-color: blue hotpink;
}

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo	Kuvaus
color	Määritä reunaväri. Oletusväri on elementin nykyvä väri. Tarkista CSS-värit arvojen saadaksesi täydellisen luettelon mahdollisista värisarjoista.
transparent	Määritä reunaväri tulee olla läpinäkyvä.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

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