CSS border-inline-start-color ominaisuus

edellinen sivu border-inline-start
Seuraava sivu border-inline-start-style

määrittely ja käyttö

border-inline-start-color ominaisuus asettaa elementin reunavärin rivin alkupäässä.

Huomioitavaa:jotta border-inline-start-color ominaisuus vaikuttaakseen, on asetettava border-inline-start-style ominaisuus.

CSS border-inline-start-color ominaisuus ja reunaväri-alha,reunaväri-vasen,reunaväri-oikea ja border-top-color Ominaisuudet ovat hyvin samanlaisia, mutta border-inline-start-color Ominaisuus riippuu rivin sisäisestä suunnasta.

Huomioitavaa:liittyviin CSS-ominaisuuksiin writing-mode,text-orientation ja direction Määrittää rivin sisäisen suunnan. Tämä vaikuttaa rivin alkupäässä ja loppupäässä sijaintiin sekä border-inline-start-color Ominaisuuden vaikutus. English pages, the inline direction is from left to right, and the block direction is downward.

Esimerkki

Esimerkki 1

Aseta rivin sisäisen suunnan aloituspaikan reunan väri:

div {
  border-inline-start-style: solid;
  border-inline-start-color: pink;
}

Kokeile itse

Esimerkki 2

käyttämällä writing-mode-ominaisuutta

Rivin sisäisen suunnan aloituspaikan reunan sijainti riippuu writing-mode Ominaisuuden vaikutus:

div {
  border-inline-start-style: solid;
  writing-mode: vertical-rl;
  border-inline-start-color: 5px;
}

Kokeile itse

Esimerkki 3

käyttämällä direction-ominaisuutta

Rivin sisäisen suunnan aloitus- ja loppusijainti riippuvat direction Ominaisuuden vaikutus:

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo	Kuvaus
väri	Määritä reunan väri. Oletuksena on elementin nykyvä väri. Katso:CSS väriarvot.
läpinäkyvä	Määritä reunan väri tulisi olla läpinäkyvä.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Peri tämän ominaisuuden arvon vanhemmalta elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	Elementin nykyvä väri
Perintä:	Ei
Animaation luominen:	Tuki. Katso:Animaatiot ja siihen liittyvät ominaisuudet.
Versio:	CSS3
JavaScript-kieli:	object.style.borderInlineStartColor="pink"