Атрибут border-end-start-radius CSS

Определение и использование

border-end-start-radius Свойство используется для определения радиуса закругления между концом блока (block-end) и началом строки (inline-start).

Внимание:соответствующие CSS свойства writing-mode,text-orientation и direction Определяет блоковое направление и направление строки. Поэтому эти свойства также влияют на border-end-start-radius Результат свойств. Для английских страниц, направление строки вlant от левого к правому, а блоковое направление —向下.

Если border-end-start-radius Если свойство имеет два значения, то закругление будет эллиптическим:

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

Если border-end-start-radius Если свойство имеет значение, то закругление будет круглым:

border-end-start-radius: 50px;

CSS border-end-start-radius Свойства и border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius и border-top-right-radius очень похож, но border-end-start-radius Атрибут зависит от блочной ориентации и инлайновой ориентации.

Пример

Пример 1

Добавить закругление блока в конце блочной ориентации и в начале инлайновой ориентации для некоторых элементов:

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

Попробуйте сами

Пример 2: Сочетание свойства direction

Положение закругления блока в конце блочной ориентации и в начале инлайновой ориентации зависит от direction Влияние свойства:

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

Попробуйте сами

Пример 3: Сочетание свойства writing-mode

Положение закругления блока в конце блочной ориентации и в начале инлайновой ориентации зависит от writing-mode Влияние свойства:

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

Попробуйте сами

CSS синтаксис

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

Значение атрибута

Технические детали

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Соответствующие страницы

Уроки:Угол в CSS

См. также:Атрибут border-bottom-left-radius CSS

См. также:Атрибут border-bottom-right-radius CSS

См. также:Свойство border-top-left-radius CSS

См. также:Свойство border-top-right-radius CSS

См. также:Атрибут CSS direction

См. также:Свойство text-orientation в CSS

См. также:Свойство writing-mode в CSS