CSS приклад: column-rule

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.01.0+11.1+3.0+1.5+2.0+

Коротка інформація

Значення за замовчуваннямmedium none
УспадковуєтьсяНі
ЗастосовуєтьсяДо блокових елементів (крім таблиць), клітинок і елементів, у яких display встановлено як inline-block
Відсотковий записНе застосовується

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

У багатоколонковому тексті відображує лінію між колонками.

Синтаксис

column-rule: <ширина-межі> || <стиль-межі> || <колір>

Значення

Значення ширина-межі визначає товщину лінії. Для контролю вигляду лінії є кілька значень стиль-межі. Їх назви та результати дії показані на малюнку 1.

<колір> встановлює колір лінії, значення може бути у будь-якому допустимому для CSS форматі.

Приклад

Приклад

HTML5CSS3IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>column-rule</title>
  <style>
   .book {
    -moz-column-count: 3;
    -moz-column-width: 200px;
    -moz-column-rule: 1px solid #ccc;
    -webkit-column-count: 3;
    -webkit-column-width: 200px;
    -webkit-column-rule: 1px solid #ccc;
    column-count: 3;
    column-width: 200px;
    column-rule: 1px solid #ccc;
   }
  </style>
 </head>
 <body>
  <div class="book">
   Тут використано ряд конструктивних елементів у якості модусу в багатоколонковому тексті. Фьюжн варіює гармонічний інтервал, а трехчастна фактурна форма можлива. Форшлаг продовжує хамбакер. 
  </div>
 </body>
</html>

Браузери

Firefox підтримує нестандартну властивість -moz-column-rule.

Safari, Chrome та iOS підтримують нестандартну властивість -webkit-column-rule.

Часті запитання

  • Q: Як використовувати column-rule в CSS?

    A: column-rule в CSS використовується для задання стилю, ширини та кольору вертикальної лінії, яка розділяє колонки у багатоколоночному макеті.

  • Q: Де можна використовувати column-rule в CSS?

    A: column-rule можна використовувати у властивостях CSS для елементів, які мають властивість 'column-count' або 'column-width'.

  • Q: Як задати ширину та колір column-rule в CSS?

    A: Ширину та колір column-rule можна задати використовуючи властивості 'column-rule-width' та 'column-rule-color' в CSS відповідно.

  • Q: Як задати стиль лінії column-rule в CSS?

    A: Стиль лінії column-rule можна задати використовуючи властивість 'column-rule-style' в CSS, де можливі значення, такі як 'solid', 'dashed', 'dotted' тощо.

  • Q: Чи підтримується column-rule в усіх браузерах?

    A: column-rule підтримується в багатьох сучасних браузерах, але можуть бути певні відмінності у відображенні на різних платформах. Рекомендується перевіряти сумісність з браузерами.