小程序模板網(wǎng)

鎏嫣宮守護wxss學(xué)習(xí)《七》所有屬性(按字母排列:f 開頭)

發(fā)布時間:2017-11-28 17:25 所屬欄目:小程序開發(fā)教程

f開頭的屬性主要就是盒子布局和字體的,先來看圖,然后在一項項來看。1.fallback:是@counter-style 里的屬性值。小程序里不知道怎么寫,一寫@counter-style 就報未定義的屬性。不過在css中Firefox支持。點擊打開鏈 ...

 
 
 

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

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

2.fill:這是SVG里的屬性。fill-opacity與fill-rule一樣。詳情請自行跳轉(zhuǎn)。

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

取值:none:沒有效果。

 blur:高斯模糊。不接受百分比。設(shè)置為數(shù)值,數(shù)值越大越模糊。

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

contrast:調(diào)整圖像的對比度。值是0%的話圖像會全黑。值是100%,圖像不變。值可以超過100%,意味著會運用更低的對比.若沒有設(shè)置值,默認(rèn)1。

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

<shadow>參數(shù)如下:

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

<offset-y>設(shè)定垂直距離.負(fù)值會使陰影出現(xiàn)在元素上方。查看<length>可能的單位.如果兩個值都是0, 則陰影出現(xiàn)在元素正后面 (如果設(shè)置了 <blur-radius> and/or <spread-radius>,會有模糊效果).<blur-radius> (可選)這是第三個code><length>值. 值越大,越模糊,則陰影會變得更大更淡.不允許負(fù)值 若未設(shè)定,默認(rèn)是0 (則陰影的邊界很銳利).
<spread-radius> (可選)這是第四個 <length>值. 正值會使陰影擴張和變大,負(fù)值會是陰影縮小.若未設(shè)定,默認(rèn)是0 (陰影會與元素一樣大小).注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度,如果加了也不會渲染。
 <color> (可選)查看 <color>該值可能的關(guān)鍵字和標(biāo)記。若未設(shè)定,顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 會應(yīng)用colorcolor屬性的值。另外, 如果顏色值省略,WebKit中陰影是透明的。
grayscale將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像,值為0%圖像無變化。
值在0%到100%之間,則是效果的線性乘子。若未設(shè)置,值默認(rèn)是0。
hue-rotate(deg):給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會被調(diào)整的色環(huán)角度值。值為0deg,則圖像無變化。
若值未設(shè)置,默認(rèn)值是0deg。該值雖然沒有最大值,超過360deg的值相當(dāng)于又繞一圈。
invert(%):給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會被調(diào)整的色環(huán)角度值。值為0deg,則圖像無變化。若值
未設(shè)置,默認(rèn)值是0deg。該值雖然沒有最大值,超過360deg的值相當(dāng)于又繞一圈。
opacity(%):轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明,值為100%則圖像
無變化。值在0%和100%之間,則是效果的線性乘子,也相當(dāng)于圖像樣本乘以數(shù)量。 若值未設(shè)置,
值默認(rèn)是1。該函數(shù)與已有的opacity屬性很相似,不同之處在于通過filter,一些瀏覽器為了提升性
能會提供硬件加速。
saturate(%):轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和,值為100%則圖像無變化。
其他值,則是效果的線性乘子。超過100%的值是允許的,則有更高的飽和度。 若值未設(shè)置,值默認(rèn)是1。
sepia(%):將圖像轉(zhuǎn)換為深褐色。值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的,值為0%圖像無變化。

值在0%到100%之間,則是效果的線性乘子。若未設(shè)置,值默認(rèn)是0;

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

 

 

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

5.flex-basis:用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值.取值:number,auto。flex-basis:100rpx,相當(dāng)于設(shè)置了

100rpx的長度。

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

 

取值:row:默認(rèn)值。靈活的項目將水平顯示,正如一個行一樣。

row-reverse:與row相同,但是以相反的順序。

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

column-reverse:與column相同,同樣是以相反的順序。

 

7.flex-flow:屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性,用于設(shè)置或檢索彈性盒模型對象的子元素排

列方式。

8.flex-grow:用于設(shè)置或檢索彈性盒的擴展比率。flex-grow:3, 相當(dāng)于設(shè)置這個是別的3倍長度。

 

9.flex-shrink:用于設(shè)置或檢索彈性盒的收縮比率.flex-shrink:相當(dāng)于設(shè)置這個是別的1/3的長度。

10.flex-wrap :規(guī)定flex容器是單行或者多行,同時橫軸的方向決定了新行堆疊的方向。

取值:nowrap,規(guī)定靈活的項目不拆行或不拆列。

wrap:規(guī)定靈活的項目在必要的時候進行拆行活著拆列。

wrap-reverse:規(guī)定靈活的項目在必要的時候進行拆行活著拆列,不過是以相反的順序。

11.float: 指定一個盒子(元素)是否應(yīng)該浮動。取值:left right。

12.flood-color:SVG里的屬性,設(shè)置補白區(qū)域的顏色。點擊打開鏈接

13.flood-opacity: 同12,設(shè)置透明度。點擊打開鏈接
 



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://u-renovate.com/wxmini/doc/course/17975.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢