CSS属性 border-start-start-radius

Poprzednia strona border-start-end-radius
Następna strona border-style

Definicja i użycie

border-start-start-radius właściwość używana do określenia promienia zaokrąglenia między początkiem elementu blokowego (block-start) a początkiem kierunku wewnętrznego (inline-start).

Uwaga:powiązane właściwości CSS writing-mode,text-orientation i direction definiuje kierunek blokowy i wewnętrzny. Dlatego te właściwości wpływają również na border-start-start-radius rezultat właściwości. Dla stron angielskich, kierunek wewnętrzny to od lewej do prawej, a kierunek blokowy to w dół.

jeśli border-start-start-radius jeśli właściwość ma dwie wartości, zaokrąglenie będzie elipsą:

border-start-start-radius: 50px 100px;

jeśli border-start-start-radius jeśli właściwość ma wartość, zaokrąglenie będzie kółkiem:

border-start-start-radius: 50px;

CSS border-start-start-radius właściwości i lewy dolny promień zakrzywienia,border-bottom-right-radius,border-top-left-radius i border-top-right-radius jest bardzo podobny do border-start-start-radius Atrybut zależy od kierunku blokowego i wewnętrznego.

Przykład

Przykład 1

Dodaj zaokrąglenia do miejsca początkowego kierunku blokowego i wewnętrznego niektórych elementów:

#example1 {
  background-color: lightblue;
  border-start-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-start-radius: 50%;
  writing-mode: vertical-rl;
}

Spróbuj sam

Przykład 2: Połączenie atrybutu direction

Pozycja zaokrąglenia w miejscu początkowym kierunku blokowego i wewnętrznego jest zależna od direction Wpływ atrybutu:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-start-radius: 25px;
}

Spróbuj sam

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

Pozycja zaokrąglenia w miejscu początkowym kierunku blokowego i wewnętrznego jest zależna od writing-mode Wpływ atrybutu:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-start-radius: 25px;
}

Spróbuj sam

Język CSS

border-start-start-radius: 0|length|initial|inherit;

Wartość atrybutu

Wartość	Opis
0	Domyślna wartość.
length	Definiuje kształt zaokrąglenia w miejscu początkowym kierunku blokowego i wewnętrznego. Zobacz:Jednostki CSS.
%	Definiuje kształt zaokrąglenia za pomocą procentu długości elementu na odpowiedniej osi.
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.

Szczegóły techniczne

Domyślna wartość:	0
Inheritance:	Nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Język JavaScript:	object.style.borderStartStartRadius="50px"