column-rule
試してみましょう
これは一括指定プロパティであり、一回の便利な宣言で個別の column-rule-*
プロパティ (column-rule-width
, column-rule-style
, column-rule-color
) を設定できます。
メモ: 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。
構文
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;
/* グローバル値 */
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: unset;
column-rule
プロパティは、以下に挙げる値のうち 1 ~ 3 個を任意の順序で指定します。
値
<'column-rule-width'>
-
<length>
または 3 つのキーワード、thin
、medium
、thick
のうちの 1 つです。詳しくはborder-width
を参照してください。 <'column-rule-style'>
-
有効な値と詳細は
border-style
を参照してください。 <'column-rule-color'>
-
<color>
値です。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | 段組み要素 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
例
例 1
/* "medium dotted currentcolor" と同じ */
p.foo { column-rule: dotted; }
/* "medium solid blue" と同じ */
p.bar { column-rule: solid blue; }
/* "8px solid currentcolor" と同じ */
p.baz { column-rule: solid 8px; }
p.abc { column-rule: thick inset blue; }
例 2
HTML
<p class="content-box">
This is a bunch of text split into three columns.
Take note of how the `column-rule` property is used
to adjust the style, width, and color of the rule
that appears between the columns.
</p>
CSS
.content-box {
padding: 0.3em;
background: #ff7;
column-count: 3;
column-rule: inset 2px #33f;
}
結果
仕様書
Specification |
---|
CSS Multi-column Layout Module Level 1 # column-rule |
ブラウザーの互換性
BCD tables only load in the browser