scheda delle lezioni

Manuale di riferimento CSS

proprietà CSS

zoom

Corso a scelta

CodeW3C.com Cassetto magico

Proprietà CSS border-inline-style

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

Recomendazione di corso:

border-inline-style Definizione e uso

border-inline-style La proprietà imposta lo stile del bordo dell'elemento nella direzione inline.

Il bordo di fine inline è tratteggiato (dotted). border-inline-style Il valore della proprietà può essere impostato in diversi modi:

border-inline-style: solid dotted;

Ha due valori:
Il bordo di inizio inline è solido (solid).

Il bordo di fine inline è tratteggiato (dotted). border-inline-style Se

border-inline-style: dotted;

Ha un valore:

Il bordo di inizio e fine inline del CSS è tratteggiato (dotted). border-inline-style Le proprietà sono correlate a border-bottom-style、border-left-style、border-right-style e border-top-style Le proprietà sono molto simili, ma border-inline-style Le proprietà dipendono dalla direzione inline.

Attenzione:Proprietà CSS correlate writing-mode、text-orientation e direction Definisce la direzione inline. Questo influisce sulla posizione di inizio e fine della riga, nonché border-inline-style Risultato delle proprietà. Per le pagine in inglese, la direzione inline è da sinistra a destra, e la direzione del blocco è verso il basso.

Esempio

Esempio 1

Impostare lo stile del bordo nella direzione in linea:

#example1 {
  border-inline-style: solid;
}
#example2 {
  border-inline-style: dashed dotted;
}

Prova tu stesso

Esempio 2: Combinazione dell'attributo writing-mode

La posizione del bordo alla partenza e alla fine della direzione in linea è influenzata da writing-mode Impatto dell'attributo:

div {
  writing-mode: vertical-rl;
  border-inline-style: dotted;
}

Prova tu stesso

Esempio 3: Combinazione dell'attributo direction

La posizione del bordo alla partenza e alla fine della direzione in linea è influenzata da direction Impatto dell'attributo:

div {
  direction: rtl;
  border-inline-style: solid dotted;
}

Prova tu stesso

Sintassi CSS

border-inline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valore dell'attributo

Valore	Descrizione
none	Valore predefinito. Specificare nessun bordo.
hidden	Uguale a none, ma diverso nella risoluzione dei conflitti dei bordi degli elementi tabella.
dotted	Specificare il bordo a punti.
dashed	Specificare il bordo tratteggiato.
solid	Specificare il bordo continuo.
double	Specificare il bordo a doppia linea.
groove	Specificare il bordo scanalato 3D. L'effetto dipende dal valore di border-color.
ridge	Specificare il bordo sporgente 3D. L'effetto dipende dal valore di border-color.
inset	Specificare il bordo incassato 3D. L'effetto dipende dal valore di border-color.
outset	Specificare il bordo convesso 3D. L'effetto dipende dal valore di border-color.
initial	Imposta questo attributo al suo valore predefinito. Vedi: initial.
inherit	Eredita questo attributo dal suo elemento padre. Vedi: inherit.

Dettagli tecnici

Valore predefinito:	none
Ereditarietà:	No
Produzione di animazione:	Non supportato. Si prega di consultare:Proprietà correlate con l'animazione.
Versione:	CSS3
Sintassi JavaScript:	object.style.borderInlineStyle="dotted"