PHP前端开发

CSS3 多列规则宽度属性

百变鹏仔 4周前 (09-19) #CSS
文章标签 宽度

多列rule-width属性用于指定列宽。您可以尝试运行以下代码来使用CSS实现rule-width属性:

示例

现场演示

<html>   <head>      <style>         .multi {            /* Column count property */            -webkit-column-count: 4;            -moz-column-count: 4;            column-count: 4;                       /* Column gap property */            -webkit-column-gap: 40px;            -moz-column-gap: 40px;            column-gap: 40px;                       /* Column style property */            column-rule-style: solid;            column-rule-color: #ff00ff;                       /* Colum width property */            -webkit-column-rule-width: 5px;            -moz-column-rule-width: 5px;            column-rule-width: 5px;         }      </style>   </head>   <body>      <div class = "multi">         Tutorials Point originated from the idea that there exists a class of readers who respond         better to online content and prefer to learn new skills at their own pace from the comforts         of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and         elated by the response it generated, we worked our way to adding fresh tutorials to our         repository which now proudly flaunts a wealth of tutorials and allied articles on topics         ranging from programming languages to web designing to academics and much more.      </div>   </body></html>