CSS border-inline-style свойство

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

border-inline-style Свойство устанавливает стиль рамки элемента в направлении строки.

border-inline-style Значение свойства можно установить несколькими способами:

Если border-inline-style Свойство имеет два значения:

div {
  • Стиль рамки начала строки внутреннего направления является сплошной линией (сплошной)
  • Стиль рамки конца строки внутреннего направления является точечной линией (точечной)

Если border-inline-style Свойство имеет один значение:

writing-mode
  • Свойства рамки начала и конца строки имеют стиль точки (точечная линия)

CSS border-inline-style Свойства связаны с border-bottom-style、border-left-style、border-right-style и border-top-style Свойства очень похожи, но border-inline-style Свойства зависят от направления строки.

Примечание:связанные CSS свойства border-inline-style: dashed dotted;、text-orientation и Пример 3: Комбинация атрибута direction Определяет направление строки. Это влияет на начало и конец строки, а также border-inline-style Результат свойств. Для английских страниц, направление строки внутреннее, а блоковое - вниз.

实例

Инстанция

Пример

Пример 1
  Установить стиль края в направлении строки:
direction: rtl;
#example1 {
  border-inline-style: solid;
direction: rtl;

border-inline-style: solid dotted;

#example2 {

border-inline-style: dotted; border-inline-style: dashed dotted; Положение края в начале и конце строки зависит от

direction
  Пример 2: Комбинация атрибута writing-mode
  writing-mode
direction: rtl;

border-inline-style: solid dotted;

writing-mode: vertical-rl;

border-inline-style: dotted; Пример 3: Комбинация атрибута direction Положение края в начале и конце строки зависит от

direction
  Влияние атрибута:
  div {
direction: rtl;

border-inline-style: solid dotted;

}

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

Синтаксис CSS

border-inline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; Значение атрибута
none Значение
Описание Значение по умолчанию. Определяет отсутствие края.
hidden Как и none, но по-другому решает конфликты с краями таблицы.
dashed Определить пунктирный край.
solid Определить сплошной край.
double Определить двойную линию края.
groove

Определить 3D вогнутый край.

Эффект зависит от значения border-color.
ridge

Определить 3D выпуклый край.

Эффект зависит от значения border-color.
inset

Определить 3D вогнутый край.

Эффект зависит от значения border-color.
outset

Определить 3D выпуклый край.

Эффект зависит от значения border-color.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Этот атрибут наследуется от родительского элемента. См. также inherit.

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

Значение по умолчанию: none
Ингерит: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.borderInlineStyle="dotted"

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

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

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

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

Учебное пособие:Ограничения в CSS

Ссылка:Свойство border в CSS

Ссылка:Свойство border-inline в CSS

Ссылка:CSS border-inline-style свойство

Ссылка:Свойство border-bottom-style в CSS

Ссылка:CSS border-left-style свойство

Ссылка:CSS border-right-style свойство

Ссылка:CSS border-top-style свойство

Ссылка:Свойство direction в CSS

Ссылка:Атрибут text-orientation в CSS

Ссылка:Атрибут writing-mode в CSS