Atrybut border-start-end-radius CSS

Poprzednia strona border-spacing
Następna strona border-start-start-radius

Definicja i użycie

border-start-end-radius Atrybut używany do określenia promienia zaokrąglenia między początkiem elementu blokowego (block-start) a końcem kierunku wewnętrznego (inline-end).

Uwaga:powiązane atrybuty CSS writing-mode,text-orientation i direction definiuje kierunek zewnętrzny i wewnętrzny. Dlatego te atrybuty wpływają na border-start-end-radius wynik atrybutu. Dla stron angielskojęzycznych, kierunek wewnętrzny to od lewej do prawej, a kierunek zewnętrzny to w dół.

jeśli border-start-end-radius Jeśli atrybut ma dwie wartości, zaokrąglenie będzie elipsą:

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

jeśli border-start-end-radius Jeśli atrybut ma wartość, zaokrąglenie będzie kółkiem:

border-start-end-radius: 50px;

CSS border-start-end-radius atrybuty border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius i border-top-right-radius jest bardzo podobny, ale border-start-end-radius Atrybut zależy od kierunku bloku i wewnętrznego.

Przykład

Przykład 1

Dodaj zaokrąglenia do某些元素的 zaczynającego blok i kończącego kierunek wewnętrzny:

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

Spróbuj sam!

Przykład 2: Połączenie atrybutu direction

Położenie zaokrąglenia zaczynającego bloku i kończącego kierunek wewnętrzny jest zależne od: direction Wpływ atrybutu:

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

Spróbuj sam!

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

Położenie zaokrąglenia zaczynającego bloku i kończącego kierunek wewnętrzny jest zależne od: writing-mode Wpływ atrybutu:

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

Spróbuj sam!

Gramatyka CSS

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

Wartość atrybutu

Wartość	Opis
0	Domyślna wartość.
length	Definiuje kształt zaokrąglenia zaczynającego blok i kończącego kierunek wewnętrzny. Zobacz:Jednostki CSS.
%	Definiuje kształt zaokrąglenia na podstawie procentu długości elementu na odpowiedniej osi.
initial	Ustawia ten atrybut na jego wartość domyślną. Zobacz: initial.
inherit	Przypisuje temu atrybutowi wartość dziedziczoną z elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

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