Руководство по CSS

CSS @RULES

Полный список свойств CSS

Свойство column-rule-width в CSS3 Свойство column-rule-color в CSS3

Метод использования и примеры CSS3 column-rule-style

Свойство column-rule-style CSS устанавливает стиль правил, рисуемых между столбцами многострочного форматирования.

В таблице приведены примеры использования и история версий этого свойства, а также синтаксис его использования в скриптах JavaScript.

Значение по умолчанию:	none
Применяется к:	Элементы многострочного форматирования
Инherit:	Нет
Анимировано:	Нет.См. также Анимационные свойства.
Версия:	Новые возможности CSS3
JavaScript синтаксис:	объект.style.columnRuleStyle="dotted"

　Синтаксис использования column-rule-style

Синтаксис этого свойства такой:

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

Ниже приведен пример того, как использовать атрибут column-rule-style.

Пример

p {
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-column-count: 3;
　　　　-webkit-column-gap: 100px;
　　　　-webkit-column-rule-color: красный;
　　　　-webkit-column-rule-width: 2px;
　　　　-webkit-column-rule-style: solid;
　　　　/* Firefox */
　　　　-moz-column-count: 3;
　　　　-moz-column-gap: 100px;
　　　　-moz-column-rule-color: красный;
　　　　-moz-column-rule-width: 2px;
　　　　-moz-column-rule-style: solid;
　　　　
　　　　column-count: 3;
　　　　column-gap: 100px;
　　　　column-rule-color: красный;
　　　　column-rule-width:　2px;
　　　　column-rule-style:　solid;
}

Проверьте, чтобы узнать‹/›

Значения свойств

В таблице ниже описаны значения этого свойства.

Значение	Описание
none	Не показывать никакие правила.
hidden	Не показывать никакие правила. Эквивалент none.
dotted	Показывать правило как серию точек.
dashed	Показывать правило как серию коротких отрезков, т.е. тире.
solid	Показывать правило как сплошную линию.
double	Показывать правило как две параллельные сплошные линии с промежутками между ними. Общая длина линий и промежутки между ними равныcolumn-rule-widthзначений.
groove	Показывать правила, вырезанные в странице. Он создает впечатление 3D, обычно достигается созданием двух тонов тени, которые светлее и темнееcolumn-rule-colorсветлее и темнее.
ridge	Показывать правила с противоположным действием, как и groove. Он также создает впечатление 3D, как будто правила выходят из страницы.
inset	Показывать такие же правила, как и
outset	Показывать такие же правила, как и
initial	Установить этот параметр в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует значение column-rule-style родительского элемента.

Примечание:Свойство column-rule-style в основном использует значения, определенные дляborder-styleно интерпретация этих значений отличается отСхема сложения границ аналогична.

Совместимость браузеров

Совместимость браузеров для column-rule-style свойства, числа в таблице показывают минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

	Firefox 2+ ^-moz- Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 3.1+ ^-webkit- Opera 11.1+ ^-o-, 15+ ^-webkit-

Дополнительное чтение

Узнайте больше из следующих руководств:CSS3 многостраничная разметка.

Связанные свойства:column-width,column-fill,column-gap,column-rule,column-rule-width,column-rule-color,column-span,column-count,columns.

Свойство column-rule-width в CSS3 Свойство column-rule-color в CSS3