CSS样式更改——多列、元素是否可见、图片透明度-阿里云开发者社区

开发者社区> Python技术进阶> 正文

CSS样式更改——多列、元素是否可见、图片透明度

简介: 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样式更改有个简单的认识和了解。
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
Python技术进阶
使用钉钉扫一扫加入圈子
+ 订阅

官网链接