创建多列
column-count 属性规定元素应该被分隔的列数：
实例
把 div 元素中的文本分隔为三列：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
column-gap 属性规定列之间的间隔：
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
column-rule 属性设置列之间的宽度、样式和颜色规则。
div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
| 属性 | 描述 |
|---|---|
| column-count | 规定元素应该被分隔的列数。 |
| column-fill | 规定如何填充列。 |
| column-gap | 规定列之间的间隔。 |
| column-rule | 设置所有 column-rule-* 属性的简写属性。 |
| column-rule-color | 规定列之间规则的颜色。 |
| column-rule-style | 规定列之间规则的样式。 |
| column-rule-width | 规定列之间规则的宽度。 |
| column-span | 规定元素应该横跨的列数。 |
| column-width | 规定列的宽度。 |
| columns | 规定设置 column-width 和 column-count 的简写属性。 |
1.column-count: number|auto;
number 元素内容将被划分的最佳列数。
auto 由其他属性决定列数，比如 "column-width"。
2.column-fill: balance|auto;
balance 对列进行协调。浏览器应对列长度的差异进行最小化处理。
auto 按顺序对列进行填充，列长度会各有不同。
3.column-gap: length|normal;
length 把列间的间隔设置为指定的长度。
normal 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。
4.column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width 设置列之间的宽度规则。
column-rule-style 设置列之间的样式规则。
column-rule-color 设置列之间的颜色规则。
5.column-span: 1|all;
1 元素应横跨一列。
all 元素应横跨所有列。
6.columns: column-width column-count;
column-width 列的宽度。
column-count 列数。
七、CSS3补充
<p>椭圆边框3</p>
<p id="rcorner3"></p>
:
#rcorner3{
border-radius:50%;
background:blue;
padding:20px;
width:200px;
height:150px;
}
<P>指定背景图片元素的圆角</P>
<p id ="rcorners3">圆角</p>
:
#rcorners3{
border-radius:25px;
background:url(1234.jpg);
background-position:left top;
background-repeat:repeat;
padding:20px;
width:200px;
height:150px;
}
阴影
外阴影
.div1{
width:200px;
height:100px;
background:yellow;
box-shadow:10px 10px 5px 5px gray;
}
内阴影
.div2{
width:200px;
height:100px;
background:green;
box-shadow:10px 10px 5px 5px gray inset;
}
设置多层阴影
div{
width:200px;
height:100px;
background:yellow;
box-shadow:10px 10px 5px 5px gray,
15px 15px 5px 5px blue,
20px 20px 5px 5px yellow,
25px 25px 5px 5px green;
}
倒影效果
p{
font-size:36px;
-webkit-box-reflect:below -10px
-webkit-linear-gradient(top,transparent 20%,#ffffff)
}