English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Свойство column-rule CSS определяет линию, которую нужно нарисовать между каждым столбцом, то есть "правило". Это сокращенная форма свойства, которая одновременно устанавливаетcolumn-rule-width,column-rule-styleиcolumn-rule-color.
В таблице ниже приведено описание использования и история версий этого свойства, а также синтаксис использования в скриптах JavaScript.
| Значение по умолчанию: | Просмотреть все свойства |
|---|---|
| Применяется к: | Элементы с несколькими столбцами |
| Ингеритация: | нет |
| Анимированные: | Да, потому что некоторые свойства скорописи могут анимироваться.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| JavaScript синтаксис: | объект.style.columnRule="3px outset #ff00ff" |
Синтаксис этого свойства такой:
column-rule: [ column-rule-width column-rule-style column-rule-color ] | initial | inherit
Ниже приведен пример того, как использовать свойство column-rule.
p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
-webkit-column-rule: 2px solid red;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
-moz-column-rule: 2px solid red;
column-count: 3;
column-gap: 100px;
column-rule: 2px solid red;
}Проверьте, как это выглядит‹/›Таблица ниже описывает значения этого свойства.
| Значение | Описание |
|---|---|
| column-rule-width | Установить ширину правила между столбцами. Значением по умолчанию является medium. Негативные значения не допускаются. |
| column-rule-style | Установить стиль правила между столбцами. Значением по умолчанию является none. |
| column-rule-color | Установить цвет правила между столбцами. Значением по умолчанию являетсяcolorэлемент. |
| initial | Установить это свойство в его значение по умолчанию. |
| inherit | Если указано, то связанный элемент принимает значения свойства column-rule родительского элемента. |
Совместимость браузеров для свойства column-rule, числа в таблице показывают минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
Узнайте больше из следующих руководств:CSS3 многостраничная разметка.
Связанные свойства:column-width,column-fill,column-gap,column-rule-width,column-rule-style,column-rule-color,column-span,column-count,columns.