css3 column-rule属性设置列之间的样式、宽度、颜色笔记

原创 国哥笔记  2018-11-12 10:22  阅读 808 views 次

column-rule属性定义及用法

在css中,column-rule属性是用在多列布局中,用来将列与列之间的样式、宽度、颜色同时定义在一个声明中,就是说通过column-rule属性可以同时设置列与列之间的分割线样式、宽度、颜色。在多列布局中,当我们需要设置column-rule-width(宽度)、column-rule-style (样式)以及column-rule-color(颜色)属性时,就可以使用column-rule属性来将这三个属性定义在同一个声明中,这样的好处是:直观、好记、少写代码;

column-rule属性有三个属性值,以空格分隔,三个属性值除了样式(column-rule-style)不可以省略外,其余两个都可以省略。如:column-rule: 8px solid;、column-rule: solid red;、column-rule:solid;都是可以的。

column-rule属性语法格式

  1. css语法:column-rule: column-rule-width column-rule-style column-rule-color;(如:column-rule: 8px solid red;)
  2. JavaScript 语法:object.style.columnRule="8px solid #FF0000"

column-rule属性值说明

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 column-rule属性设置列之间的样式、宽度、颜色笔记</title>
<style type="text/css">
body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;margin-top:10px;: ;}
.a{column-count:3;column-rule: 1px solid red;}
.b{column-count:3;column-rule: solid #8A2BE2;}
.c{column-count:3;column-rule: 6px solid;}
.d{column-count:3;column-rule: solid;}
</style>
</head>
<body>
<div class="a">column-rule: 1px solid red;演示,设置宽度样式颜色。这是为了演示效果多写的</div>
<div class="b">column-rule: solid #8A2BE2;演示,设置样式和颜色。这是为了演示效果多写的</div>
<div class="c">column-rule: 6px solid;演示,设置宽度和样式。这是为了演示效果多写的</div>
<div class="d">column-rule: solid;演示,只设置样式。这是为了演示效果多写的</div>
</body>
</html>

运行结果:

css3 column-rule属性设置列之间的样式、宽度、颜色笔记

非常相关

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/column-rule.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情