微信小程序css篇----所有屬性(按字母排列：f 開頭)

f開頭的屬性主要就是盒子佈局和字體的，先來看圖，然後在一項項來看。

1.fallback：是@counter-style 裏的屬性值。小程序裏不知道怎麼寫，一寫@counter-style 就報未定義的屬性。不過在css中Firefox支持。點擊打開鏈接。

2.fill：這是SVG裏的屬性。fill-opacity與fill-rule一樣。詳情請自行跳轉。

3.filter：定義了元素的可視效果（例如；模糊與飽和）定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。

取值：none：沒有效果。

 blur：高斯模糊。不接受百分比。設置爲數值，數值越大越模糊。

brightness：給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。

contrast：調整圖像的對比度。值是0%的話圖像會全黑。值是100%，圖像不變。值可以超過100%,意味着會運用更低的對比.若沒有設置值，默認1。

drop-shadow：drop-shadow(h-shadow v-shadow blur spread color)。給圖像設置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似；不同之處在於，通過濾鏡，一些瀏覽器爲了更好的性能會提供硬件加速。

<shadow>參數如下：

<offset-x> <offset-y> (必須)這是設置陰影偏移量的兩個 <length>值. <offset-x> 設定水平方向距離. 負值會使陰影出現在元素左邊. 

<offset-y>設定垂直距離.負值會使陰影出現在元素上方。查看<length>可能的單位.如果兩個值都是0, 則陰影出現在元素正後面 (如果設置了 <blur-radius> and/or <spread-radius>，會有模糊效果).<blur-radius> (可選)這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，默認是0 (則陰影的邊界很銳利).

<spread-radius> (可選)這是第四個 <length>值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小).注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。

 <color> (可選)查看 <color>該值可能的關鍵字和標記。若未設定，顏色值基於瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。

grayscale：將圖像轉換爲灰度圖像。值定義轉換的比例。值爲100%則完全轉爲灰度圖像，值爲0%圖像無變化。

值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0。

hue-rotate(deg)：給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值爲0deg，則圖像無變化。

若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。

invert(%)：給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值爲0deg，則圖像無變化。若值

未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。

opacity(%)：轉化圖像的透明程度。值定義轉換的比例。值爲0%則是完全透明，值爲100%則圖像

無變化。值在0%和100%之間，則是效果的線性乘子，也相當於圖像樣本乘以數量。 若值未設置，

值默認是1。該函數與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器爲了提升性

能會提供硬件加速。

saturate(%)：轉換圖像飽和度。值定義轉換的比例。值爲0%則是完全不飽和，值爲100%則圖像無變化。

其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設置，值默認是1。

sepia(%)：將圖像轉換爲深褐色。值定義轉換的比例。值爲100%則完全是深褐色的，值爲0%圖像無變化。

值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；

url()：URL函數接受一個XML文件，該文件設置了 一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素。

4.flex:是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性.詳情點擊打開鏈接

5.flex-basis:用於設置或檢索彈性盒伸縮基準值.取值：number，auto。flex-basis:100rpx,相當於設置了

100rpx的長度。

6.flex-direction 屬性規定靈活項目的方向。

取值：row：默認值。靈活的項目將水平顯示，正如一個行一樣。

row-reverse：與row相同，但是以相反的順序。

column：靈活的項目將垂直顯示，正如一個列一樣。

column-reverse：與column相同，同樣是以相反的順序。

7.flex-flow：屬性是 flex-direction 和 flex-wrap 屬性的複合屬性，用於設置或檢索彈性盒模型對象的子元素排

列方式。

8.flex-grow：用於設置或檢索彈性盒的擴展比率。flex-grow:3, 相當於設置這個是別的3倍長度。

9.flex-shrink:用於設置或檢索彈性盒的收縮比率.flex-shrink：相當於設置這個是別的1／3的長度。

10.flex-wrap ：規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

取值：nowrap，規定靈活的項目不拆行或不拆列。

wrap：規定靈活的項目在必要的時候進行拆行活着拆列。

wrap-reverse：規定靈活的項目在必要的時候進行拆行活着拆列，不過是以相反的順序。

11.float: 指定一個盒子（元素）是否應該浮動。取值：left right。

12.flood-color：SVG裏的屬性，設置補白區域的顏色。點擊打開鏈接

13.flood-opacity: 同12，設置透明度。點擊打開鏈接

14.font：之前有記錄了一篇：http://blog.csdn.net/qq_32067045/article/details/53943739。