CSS border-inline-start-color egenskap

föregående sida border-inline-start
Nästa sida border-inline-start-style

Definition och användning

border-inline-start-color egenskap att sätta elementets kantfärg vid början av dess inre riktning.

Observera:För att få border-inline-start-color egenskapen träder i kraft, måste ställas in border-inline-start-style egenskap.

CSS border-inline-start-color egenskap och nedrekanträttsfärg,vänsterkanträttsfärg,kanträttsfärg och border-top-color Egenskaperna är mycket lika, men border-inline-start-color Egenskapen är beroende av inline-direction.

Observera:relaterade CSS-egenskaper writing-mode,text-orientation och direction Definierar inline-direction. Detta påverkar början och slutet av raden, samt border-inline-start-color Egenskapens effekt. För engelska sidor är inline-direction från vänster till höger, block-direction är neråt.

Exempel

Exempel 1

Ställ in färg för kant vid början av inline-direction:

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

Prova själv

Exempel 2

Använd writing-mode-egenskapen

Kantplaceringen vid början av inline-direction påverkas av writing-mode Egenskapsverkan:

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

Prova själv

Exempel 3

Använd direction-egenskapen

Kantplaceringen vid början och slutet av inline-direction påverkas av direction Egenskapsverkan:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
color	Specificera kantfärg. Standard är elementets nuvarande färg. Se:CSS färgvärden.
transparent	Specificera att kantfärgen ska vara genomskinlig.
initial	Set this property to its default value. See initial.
inherit	From the parent element inherits this property. See inherit.

Tekniska detaljer

Standardvärde:	The current color of the element
Arvande:	Nej
Animation tillverkning:	Stöd. Se:Animation relaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.borderInlineStartColor="pink"