CSS właściwość border-inline-start-style

Poprzednia strona border-inline-start-color
Następna strona border-inline-start-width

Definicja i użycie

border-inline-start-style ustawiają styl krawędzi elementu w kierunku wewnętrznym.

ustawieniami atrybutów CSS border-inline-start-style Atrybuty są powiązane z border-bottom-style、border-left-style、border-right-style i border-top-style Atrybuty są bardzo podobne, ale border-inline-start-style 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-start-style Wynik atrybutu. Dla stron angielskich, kierunek wewnętrzny w linii to z lewej na prawo, a kierunek blokowy to w dół.

Przykład

Przykład 1

Ustaw styl obrębów początkowych kierunku wewnętrznego:

div {
  border-inline-start-style: dotted;
}

Spróbuj sam!

Przykład 2: Połączenie z atrybutem writing-mode

Pozycja obrębów początkowych kierunku wewnętrznego w linii zależy od writing-mode Wpływ atrybutu:

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

Spróbuj sam!

Przykład 3: Połączenie z atrybutem direction

Pozycja obrębów początkowych i końcowych kierunku wewnętrznego w linii zależy od direction Wpływ atrybutu:

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

Spróbuj sam!

CSS składnia

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

Wartość atrybutu

Wartość	Opis
none	Domyślna wartość. Określa brak obrębu.
hidden	Jak none, ale różni się w interpretacji konfliktów obrębów elementów tabeli.
dotted	Określa kropkowany obręb.
dashed	Określa przerywany obręb.
solid	Określa ciągły obręb.
double	Określa podwójny obręb.
groove	Określa 3D wklęsły obręb. Efekt zależy od wartości border-color.
rigde	Określa 3D wypukły obręb. Efekt zależy od wartości border-color.
inset	Określa 3D wciśnięty obręb. Efekt zależy od wartości border-color.
outset	Określa 3D wypukły obręb. Efekt zależy od wartości border-color.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Techniczne szczegóły

Domyślna wartość:	none
Inheritance:	Nie
Tworzenie animacji:	Nie obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
JavaScript składnia:	object.style.borderInlineStartStyle="dotted"