Свойство задаёт количество колонок, которое пересечет выбранный элемент. Указывается не для блока-контейнера, а для для конкретного элемента внутри, например, для заголовка.
Если нужно, чтобы изображение растянулось на все колонки, задаётся img {display: block; -webkit-column-span: all; column-span: all;}. Свойство не наследуется.
| column-span | |
| Значения: | |
| 1 | Значение по умолчанию. Элемент расположен в одной колонке. |
| all | Элемент будет распространен на все колонки. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
| h1 { -webkit-column-span: all; column-span: all; } |
Стиль разделительной линии column-rule-style
Свойство создаёт внутри пустого пространства между колонками вертикальную полосу — разделительную линию. Если не задан цвет линии, то некоторые эффекты не будут отображаться. Не наследуется.
| column-rule-style | |
| Значения: | |
| none | Значение по умолчанию, означает отсутствие линии. Цвет и ширина, заданные для линии, игнорируются. |
| hidden | Аналогично со значением none, линия скрыта. |
| dotted | Отображает линию набором квадратных точек. |
| dashed | Отображает линию как последовательность из тире. |
| solid | Обычная линия. |
| double | Отображает разделительную линию в виде двух параллельных тонких линий, расположенных на некотором расстоянии между собой. Толщина разделительной линии не указывается, но сумма линий и промежутка между ними равна значению column-rule-width. |
| groove | Отображает линию объемной, вдавленной в полотно. Это достигается путем создания тени из двух цветов, один из которых темнее, другой — светлее. |
| ridge | Отображает разделительную линию объемной, т.е. эффект, противоположный groove. |
| inset | Отображает сплошную линию цветом темнее, чем заданный цвет линии. |
| outset | Отображает сплошную линию цветом, заданным свойством column-rule-color. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
| section { -webkit-column-rule-style: dotted; -moz-column-rule-style: dotted; column-rule-style: dotted; } |
Ширина разделительной линии column-rule-width
Свойство устанавливает ширину разделительной линии. Не работает без свойстваcolumn-rule-style. Не наследуется.
| column-rule-width | |
| Значения: | |
| medium | Значение по умолчанию. Средняя толщина линии. |
| thin | Тонкая линия. |
| thick | Утолщенная линия. |
| длина | Ширина разделительной линии задается в единицах длины. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
| section { -webkit-column-rule-style: dotted; -moz-column-rule-style: dotted; column-rule-style: dotted; -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; } |
Дата: 2018-12-21, просмотров: 546.
