CSS3 列ルールの使用法
css3 列ルールの使用法:
column-rule 属性は、列間の境界線スタイルを指定するために使用されます。これは、border 属性に似ています。ただし、ボーダーとは異なり、2 つの列の間の位置にのみ作用し、スペースを占有しません。
構文構造:
column-rule:<column-rule-width> || <column-rule-style> || <column-rule-color>
この属性は複合属性です。
パラメータ分析:
(1).column-rule-width: 境界線の幅を指定します。デフォルト値は「medium」です。
(2).column-rule-style: 境界線のスタイルを指定します。デフォルト値は "none" です。
(3).column-rule-color: 境界線の色を指定します。
ブラウザのサポート:
(1) 以降でサポートされます。
(2) Google Chrome はこの属性をサポートします。
Safari ブラウザはこの属性をサポートします。
Firefox ブラウザは -moz を追加する必要があります。 - プレフィックス
Google および Safari ブラウザでは、-webkit- プレフィックスを追加する必要があります。 コード例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style type="text/css"> .columns { border: 1px solid green; width: 600px; margin: 20px auto; -webkit-column-count:2; -moz-column-count:2; column-count:2; -moz-column-rule: 2px solid blue; -webkit-column-rule: 2px solid blue; column-rule: 2px solid blue; } </style> </head> <body> <div class="columns"> 互联网的出现,极大的促进了信息的交流,随着步伐的前进,网站的交互需求越来越多,但是受限于当时的软硬件条件, 特别是网络环境的限制,非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输, 后来改名为JavaScript。随着JavaScript在互联网上的成功运用,微软公司也随之开发了自己的"JavaScript"名叫JScript, 于是在互联网上就出现多种标准的"JavaScript"脚本语言,如果任其发展下去,那么将会严重影响互联网发展, 于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会(ECMA), 并最终推出了ECMA-262标准,定义了名为ECMAScript的脚本语言,从此以后浏览器都将ECMAScript作为JavaScript的实现基础。 </div> </body> </html>
この境界線は、スペースを占有しないため、関連するスタイルを設定します。他の関連する属性を変更せずに、両端に自由に拡張できます