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

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

Polecane kursy:

border-inline-style Definicja i użycie

border-inline-style Atrybut ustawi styl ramki elementu w kierunku wewnętrznym.

styl ramki w końcu wewnętrznym jest kreskowy (kreskowy) border-inline-style Wartość atrybutu można ustawić na różne sposoby:

border-inline-style: solid dotted;

Atrybut ma dwie wartości:
styl ramki w początku wewnętrznym jest liniowy (solid)

styl ramki w końcu wewnętrznym jest kreskowy (kreskowy) border-inline-style Jeśli

border-inline-style: dotted;

Atrybut ma jedną wartość:

stylami ramki w początku i końcu wewnętrznym CSS, które są kreskowe (kreskowe). border-inline-style Atrybuty są związane z border-bottom-style、border-left-style、border-right-style i border-top-style Atrybuty są bardzo podobne, ale border-inline-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 początek i koniec wiersza oraz border-inline-style Wynik atrybutu. Dla stron w języku angielskim, kierunek wewnętrzny to od lewej do prawej, a kierunek blokowy to w dół.

Przykład

Przykład 1

Ustaw styl krawędzi wewnętrznego kierunku:

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

Spróbuj sam!

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

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

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

Spróbuj sam!

Przykład 3: Połączenie atrybutu direction

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

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

Spróbuj sam!

Gramatyka CSS

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

Wartość atrybutu

Wartość	Opis
none	Domyślna wartość. Określa brak krawędzi.
hidden	Takie jak none, ale różni się w rozwiązywaniu konfliktów krawędzi tabeli.
dotted	Określ punktową linię krawędzi.
dashed	Określ przerywaną linię krawędzi.
solid	Określ pełną linię krawędzi.
double	Określ podwójną linię krawędzi.
groove	Określ wcięty krawędź 3D. Efekt zależy od wartości border-color.
ridge	Określ wypukły krawędź 3D. Efekt zależy od wartości border-color.
inset	Określ wcięty krawędź 3D. Efekt zależy od wartości border-color.
outset	Określ wypukły krawędź 3D. Efekt zależy od wartości border-color.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Inhereduje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	none
Inheredność:	Nie
Tworzenie animacji:	Nie obsługuje. Zobacz:Atrybuty związane z animacją.
Wersja:	CSS3
Język JavaScript:	object.style.borderInlineStyle="dotted"