English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
column-rule-style CSS属性は、多列レイアウトの列間に描画されるルールのスタイルを設定します。
以下の表は、この属性の使用方法とバージョン履歴、javascriptスクリプトでの使用文法を示しています。
| デフォルト値： | 説明 |
|---|---|
| 適用範囲： | 多列要素 |
| 継承： | ありません |
| アニメーション可能： | いいえ。参照してください： アニメーション属性。 |
| バージョン： | CSS3の新機能 |
| JavaScriptの文法： | object.style.columnRuleStyle="dotted" |
この属性の文法は以下の通りです：
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
以下のサンプルでは、columnの使用方法を示しています。-rule-以下のサンプルでは、columnの使用方法を示しています。
サンプル
/* p { */
-webkit-column-Chrome, Safari, Opera 3count:
-webkit-column-; 10gap:
-webkit-column-rule-0px;
-webkit-column-rule-color: red; 2width:
-webkit-column-rule-px;
/* Firefox */
-moz-column-Chrome, Safari, Opera 3count:
-moz-column-; 10gap:
-moz-column-rule-0px;
-moz-column-rule-color: red; 2width:
-moz-column-rule-px;
column-Chrome, Safari, Opera 3count:
column-; 10gap:
column-rule-0px;
column-rule-color: red; 2width:
column-rule-px;
style: solid;}/テストして‹属性値
| 以下のテーブルは、この属性の値を説明しています。 | 値 |
|---|---|
| 説明 | none |
| ルールは表示されません。 | hidden |
| ルールは表示されません。noneと同じです。 | dotted |
| ルールを点のシリーズとして表示します。 | dashed |
| ルールを短い線のシリーズとして表示します。 | solid |
| ルールを1本の実線として表示します。 | doublecolumn-rule-widthルールを2本の平行な実線として表示します。線の合計とその間の間隔は |
| 属性値。 | groove3ルールがページに彫り込まれているように見えます。column-rule-colorDの印象、通常は2色の影を作成して実現されますが、これらの色の影は |
| の色が少し明るく暗くなります。 | ridge3ルールは反対の効果を持ち、また、 |
| Dの印象、ルールはページから出てくるように見えます。 | inset |
| 同じルールで表示されます。 | outset |
| 同じルールで表示されます。 | initial |
| この属性をデフォルト値に設定します。 | inherit-rule-指定された場合、関連する要素は親要素columnの |
styleの属性値。注意：-rule-このcolumnstyle属性は基本的に定義された値を采用します-borderstyle折りたたみ边框モデルは同じですが、これらの値の解釈は。
column-rule-style属性のブラウザの互換性、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。
|
以下のチュートリアルを参照してください：CSS3多列レイアウト。
関連属性：column-width、column-fill、column-gap、column-rule、column-rule-width、column-rule-color、column-span、column-count、columns。