CSS property border-inline-width

Poprzednia strona border-inline-style
Następna strona border-left

Definicja i użycie

border-inline-width Atrybut ustawia szerokość krawędzi elementu w kierunku wiersza.

Uwaga:Aby border-inline-width Atrybut działa, musi być ustawiony border-inline-style.

border-inline-width Wartość atrybutu można ustawić na różne sposoby:

Jeśli border-inline-width Atrybut ma dwie wartości:

border-inline-width: 10px 50px;

Szerokość krawędzi w początku wiersza wynosi 10px
Szerokość krawędzi w końcu wiersza wynosi 50px

Jeśli border-inline-width Atrybut ma jedną wartość:

border-inline-width: 10px;

Szerokość krawędzi w początku i końcu wiersza wynosi 10px

CSS border-inline-width Atrybut i atrybut CSS border-bottom-width,border-left-width,border-right-width i border-top-width Bardzo podobne, ale border-inline-width Atrybut zależy od kierunku wewnętrznego.

Uwaga:powiązane atrybuty CSS writing-mode,text-orientation i direction Definiuje kierunek wewnętrzny. To wpływa na pozycję początkową i końcową wiersza oraz border-inline-width Wynik atrybutu. Dla stron w języku angielskim, kierunek wewnętrzny to z lewej na prawo, a kierunek blokowy to w dół.

Przykład

Przykład 1

Ustaw szerokość krawędzi w kierunku wewnętrznym:

#example1 {
  border-inline-style: solid;
  border-inline-width: 10px;
}
#example2 {
  border-inline-style: dashed;
  border-inline-width: thin thick;
}

Spróbuj sam

Przykład 2: Połączenie atrybutu writing-mode

Pozycja krawędzi na początku i końcu kierunku wewnętrznego jest writing-mode Wpływ atrybutu:

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

Spróbuj sam

Przykład 3: Połączenie atrybutu direction

Pozycja krawędzi na początku i końcu kierunku wewnętrznego jest direction Wpływ atrybutu:

div {
  direction: rtl;
  border-inline-width: 5px 15px;
}

Spróbuj sam

Gramatyka CSS

border-inline-width: medium|thin|thick|length|initial|inherit;

Wartość atrybutu

Wartość	Opis
medium	Określa średnią krawędź. Domyślna wartość.
thin	Określa cienką krawędź.
thick	Określa grubą krawędź.
length	Pozwala zdefiniować grubość krawędzi. Zobacz:Jednostki CSS.
initial	Ustawia tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	medium
Inheredność:	Nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.borderInlineWidth="3px 10px"