<line-style>

Тип перечислений <line-style> задаётся одним из значений, перечисленных ниже:

none

Не отображает линию. Вычисленное значение ширины линии равно 0 даже если указано значение ширины. В случае с ячейками таблицы и схлопыванием границ значение none имеет наименьший приоритет. Если установлена какая-либо другая конфликтующая граница, она будет отображена. Значение none аналогично hidden.

hidden

Не отображает линию. Вычисленная ширина линии равна 0 даже если указано значение ширины. В случае с ячейками таблицы и схлопыванием границ значение hidden имеет наивысший приоритет. Если установлена какая-либо другая конфликтующая граница, она не будет отображена. Значение hidden аналогично none, но hidden не является допустимым значением для стилей обводки.

dotted

Отображает серию круглых точек. Радиус точек равен половине вычисленного значения ширины линии. Интервал между точками не определён спецификацией и зависит от реализации.

dashed

Отображает серию коротких штрихов с квадратными концами или сегментов линий. Точный размер и длина сегментов не определены спецификацией и зависят от реализации.

solid

Отображает одну прямую сплошную линию.

double

Отображает две прямые линии с некоторым расстоянием между ними. Длина линий суммируется и соответствует пиксельному значению, определённому шириной линии.

groove

Отображает границу с вырезанным внешним видом. Это значение противоположно ridge.

ridge

Отображает границу с выступающим внешним видом. Это значение противоположно groove.

inset

Отображает границу, которая заставляет элемент выглядеть встроенным. Это значение противоположно outset. При применении к границе ячейки таблицы и при установке border-collapse на значение collapsed, это значение ведёт себя как groove.

outset

Отображает границу, которая заставляет элемент выглядеть рельефным. Это значение противоположно inset. При применении к границе ячейки таблицы с border-collapse, установленной на collapsed, это значение ведёт себя как ridge.

Первый пример демонстрирует все ключевые значения <line-style>. Второй пример демонстрирует, как некоторые цвета линий могут отображаться неожиданным образом.

В этом примере показаны все значения <line-style> в качестве значений для свойств CSS border-style и column-rule-style.

HTML

В этом примере используются несколько элементов <div>, каждый с классом, представляющим значение <line-style>, которое демонстрируется.

<div class="<line-style>">
  <p><line-style></p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

CSS

В CSS для этого примера граница и правило колонки для всех элементов <p> определены с шириной 7px и значением стиля double. Для каждого абзаца значение double затем переопределяется путём задания разного значения <line-style> для свойств border-style и column-rule-style.

p {
  padding: 5px;
  border: double 7px #bada55;
}
p + p {
  columns: 3;
  column-gap: 20px;
  column-rule: double 7px;
  border-color: #000000;
}
.none p {
  border-style: none;
  column-rule-style: none;
}
.hidden p {
  border-style: hidden;
  column-rule-style: hidden;
}
.dotted p {
  border-style: dotted;
  column-rule-style: dotted;
}
.dashed p {
  border-style: dashed;
  column-rule-style: dashed;
}
.solid p {
  border-style: solid;
  column-rule-style: solid;
}
.double p {
  border-style: double;
  column-rule-style: double;
}
.groove p {
  border-style: groove;
  column-rule-style: groove;
}
.ridge p {
  border-style: ridge;
  column-rule-style: ridge;
}
.inset p {
  border-style: inset;
  column-rule-style: inset;
}
.outset p {
  border-style: outset;
  column-rule-style: outset;
}

Результат

Обратите внимание, что чёрная граница не всегда чёрная.

В этом примере показан выбор стиля и цвета линий. В случае некоторых ключевых значений <line-style> цвет линии может не соответствовать ожидаемому. Чтобы создать требуемый эффект "3D" для groove, ridge, inset, и outset стилей при отображении этих значений в чёрном или белом цвете, пользовательские агенты используют другие вычисления цвета, чем при любых других комбинациях цвет-линия.

HTML

В этом примере используются несколько элементов <div>, каждый с различным border-color заданным как встроенное значение style.

<div style="border-color: #000000"></div>

CSS

У четырёх сторон каждого <div> есть различное значение <line-style> , а у каждого элемента списка есть другое значение <color>. Мы используем сгенерированное содержимое для отображения CSS, объявленного встроенным.

div {
  border-width: 10px;
  border-style: inset groove ridge outset;
  padding: 5px;
}
div::before {
  content: attr(style);
}

Результат

Обратите внимание, что почти-чёрный цвет #000001 может отличаться от фактического чёрного, и контраст между тёмными и светлыми краями более заметен при использовании светлых цветов.

• Модуль CSS фоны и границы
• Модуль CSS базового пользовательского интерфейса
• Модуль CSS многоколоночной компоновки