Стиль столбца-правила - CSS-хитрости

Содержание:

Anonim

Свойство column-rule-styleCSS определяет тип линии, которая рисуется между столбцами в многоколоночном макете 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+ Все
Источник: caniuse

Технические характеристики

CSS-модуль с несколькими столбцами, уровень 1 (черновик редактора)