###前言
上篇文章主要讲述了CSS样式更改中的过渡、动画基础知识,这篇文章我们来介绍下CSS样式更改中多列、元素是否可见、图片透明度知识。。
####1.多列 DoubleCol
1).创建多列
div { -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari 和 Chrome */ column-count:2; } div被分隔成两列
2).规定列之间的间隔
div { -moz-column-gap:30px; /* Firefox */ -webkit-column-gap:30px; /* Safari 和 Chrome */ column-gap:30px; } 规定列之间30像素的间隔
3).列规则
div { -moz-column-rule:1px dotted red; /* Firefox */ -webkit-column-rule:1px dotted red; /* Safari and Chrome */ column-rule:1px dotted red; } column-rule-width 列之间的宽度规则 column-rule-style 列之间的样式规则 column-rule-color 列之间的颜色规则
4).规定列的宽度和列数
div { columns:10px 3; -moz-columns:10px 3; /* Firefox */ -webkit-columns:10px 3; /* Safari 和 Chrome */ } column-width 列的宽度 column-count 列数
5).填充列
div { column-fill:auto; } balance 列处理 auto 自动填充
2.元素是否可见Visibility
div{ visibility:hidden } visible 元素可见 hidden 元素不可见 collapse 用在表格中元素可见,其它标签元素不可见
3.图片透明度0pacity
opacity:0.4 范围为0~1的小数 filter:alpha(opacity=100) 范围为0~100的整数
参考文档:W3C官方文档(CSS篇)
###总结
这篇文章主要介绍了CSS样式更改篇中的多列、元素是否可见、图片透明度知识,希望让大家对CSS样式更改有个简单的认识和了解。