Свойство column-rule-style
CSS определяет тип линии, которая рисуется между столбцами в многоколоночном макете CSS.
Собственность как бы ограничена сама по себе. Когда мы его объявляем, он рисует черную линию между столбцами CSS шириной в один пиксель.
.columns ( columns: 2 600px; column-rule-style: solid; )
Все становится более интересным, когда мы начинаем комбинировать column-rule-style
с другими column-rule-
свойствами, в том числе column-rule-width
(для установки более толстой линии) и column-rule-color
(для изменения цвета).
.columns ( columns: 2 600px; column-rule-style: solid; column-rule-width: 3px; column-rule-color: #f8a100; )
Или, эй, мы можем просто использовать column-rule
сокращенное свойство, которое объединяет все три в одном объявлении:
.columns ( columns: 2 600px; column-rule: solid 3px #f8a100; )
Синтаксис
column-rule-style: ;
- Первоначальный значение:
none
- Применимо к: многоколоночным контейнерам
- Унаследовано: нет
- Вычисленное значение: указанное ключевое слово
- Тип анимации: дискретная
Значения
column-rule-style
принимает следующие значения:
/* Keyword values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset;
Демо
Поддержка браузера
IE | Край | Fire Fox | Хром | Сафари | Опера |
---|---|---|---|---|---|
10+ | 12+ | 3.5+ | 4+ | 3.2+ | 11.5+ |
Android Chrome | Android Firefox | Браузер Android | iOS Safari | опера мини |
---|---|---|---|---|
85+ | 79+ | Нет | 3.2+ | Все |
Технические характеристики
CSS-модуль с несколькими столбцами, уровень 1 (черновик редактора)