Proprietà CSS border-inline-start

Pagina precedente border-inline-end-width
Pagina successiva border-inline-start-color

定义和用法

border-inline-start 属性是以下属性的简写：

CSS border-inline-start 属性与 CSS 属性 border-bottom、border-left、border-right e}} border-top 非常相似，但 border-inline-start 属性依赖于行内方向。

注意：相关的 CSS 属性 writing-mode、text-orientation e}} direction Definisce la direzione in linea. Questo influisce sulla posizione di inizio e fine di una riga, nonché border-inline-start Il risultato dell'attributo. Per le pagine in inglese, la direzione in linea è da sinistra a destra, la direzione in blocco è da alto a basso.

Esempio

Esempio 1

Impostare la larghezza, il colore e lo stile del bordo all'inizio della direzione in linea:

div {
  border-inline-start: 10px solid pink;
}

Prova da solo

Esempio 2: Combinazione con l'attributo writing-mode

La posizione del bordo all'inizio della direzione in linea è influenzata da writing-mode Impatto dell'attributo:

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

Prova da solo

Esempio 3: Combinazione con l'attributo direction

La posizione del bordo all'inizio della direzione in linea è influenzata da direction Impatto dell'attributo:

div {
  direction: rtl;
  border-inline-start: 5px solid hotpink;
}

Prova da solo

Sintassi CSS

border-inline-start: border-inline-start-width border-inline-start-style border-inline-start-color|initial|inherit;

Valore dell'attributo

Valore	Descrizione
border-inline-start-width	Specificare la larghezza del bordo all'inizio della direzione in linea dell'elemento. Il valore predefinito è medium.
border-inline-start-style	Specificare lo stile del bordo all'inizio della direzione in linea dell'elemento. Il valore predefinito è none.
border-inline-start-color	Specificare il colore del bordo all'inizio della direzione in linea dell'elemento. Il valore predefinito è il colore corrente del bordo.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Eredita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	medium none currentcolor
Ereditarietà:	No
Produzione di animazioni:	Supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.borderInlineStart="pink dotted 5px"