小程序模板網(wǎng)

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

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

f開(kāi)頭的屬性主要就是盒子布局和字體的,先來(lái)看圖,然后在一項(xiàng)項(xiàng)來(lái)看。1.fallback:是@counter-style 里的屬性值。小程序里不知道怎么寫(xiě),一寫(xiě)@counter-style 就報(bào)未定義的屬性。不過(guò)在css中Firefox支持。點(diǎn)擊打開(kāi)鏈 ...

 
 
 

f開(kāi)頭的屬性主要就是盒子布局和字體的,先來(lái)看圖,然后在一項(xiàng)項(xiàng)來(lái)看。

1.fallback:是@counter-style 里的屬性值。小程序里不知道怎么寫(xiě),一寫(xiě)@counter-style 就報(bào)未定義的屬性。不過(guò)在css中Firefox支持。點(diǎn)擊打開(kāi)鏈接。

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

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

取值:none:沒(méi)有效果。

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

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

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

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

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

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

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

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

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

 

 

4.flex:是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫(xiě)屬性.詳情點(diǎn)擊打開(kāi)鏈接

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

100rpx的長(zhǎng)度。

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

 

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

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

column:靈活的項(xiàng)目將垂直顯示,正如一個(gè)列一樣。

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

 

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

列方式。

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

 

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

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

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

wrap:規(guī)定靈活的項(xiàng)目在必要的時(shí)候進(jìn)行拆行活著拆列。

wrap-reverse:規(guī)定靈活的項(xiàng)目在必要的時(shí)候進(jìn)行拆行活著拆列,不過(guò)是以相反的順序。

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

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

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



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