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/