CSS column-rule-style 属性

定義と使用方法

column-rule-style属性は、列間のスタイルルールを定義します。

また参照してください：

CSS3チュートリアル：CSS3 多列

HTML DOMリファレンスマニュアル：columnRuleStyle属性

例

列間の色ルールを設定します：

div {
  column-rule-style: dotted;
}

実際に試してみてください

ページの下部にさらに例があります。

CSS语法

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

属性値

値 説明 テスト
none ルールがないことを定義します。 テスト
hidden 非表示ルールを定義します。 テスト
dotted 点状ルールを定義します。 テスト
dashed 点線ルールを定義します。 テスト
solid 実線ルールを定義します。 テスト
double 二重線ルールを定義します。 テスト
groove 3D groovedルールを定義します。この効果は幅と色値に依存します。 テスト
ridge 3D ridgedルールを定義します。この効果は幅と色値に依存します。 テスト
inset 3D insetルールを定義します。この効果は幅と色値に依存します。 テスト
outset 3D outsetルールを定義します。この効果は幅と色値に依存します。 テスト

技術的詳細

デフォルト値： none
継承性： no
バージョン： CSS3
JavaScript语法： object.style.columnRuleStyle="dotted"

さらに例

Column-count
div要素内のテキストを3列に分割します。
Column-gap
div要素内のテキストを3列に分け、間隔を30ピクセルに並べます。
Column-rule
列間の幅、スタイル、色を指定します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザバージョンを示しています。

「-webkit-」または「-moz-」で始まる数字は、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
50.0
4.0 -webkit-		 10.0 52.0
2.0 -moz-		 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1