CSS样式更改——多列、元素是否可见、图片透明度
前言
上篇文章主要讲述了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样式更改有个简单的认识和了解。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-11-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录