2017年，微信小程序css樣式已經(jīng)是當(dāng)下最熱門的話題，下面將從多方面來談?wù)勎⑿判〕绦騝ss樣式相關(guān)的內(nèi)容。

整理下小程序里所有的css屬性吧，這樣也能好查詢，按照字母表列舉：

a 共有15個屬性：其中9個為動畫animation的屬性。詳情如下：

1.additive-symbols:附加符號。Counter Style的東西，僅Firefox支持。所以不詳細(xì)說了。在這篇博客中有詳細(xì)的說明。大概樣式就是像下圖這個樣子。自動生成 甲乙丙丁等等 一二三四等等的格式。

2.align-content：在flex布局中垂直方向設(shè)置。詳見微信小程序css篇----flex布局。

3.align-items:同align-content，不過兩個不同點(diǎn)在于，align-content屬性只適用于多行的flex容器，并且當(dāng)側(cè)軸上有多余空間使flex容器內(nèi)的flex線對齊。而align-items是用來讓每一個單行的容器.簡單點(diǎn)說,按照后綴 content 是內(nèi)容，整個內(nèi)容在布局中的位置，而items 是每一個子項(xiàng)在布局的位置。算了 說不明白，看圖：

4.align-self:父控件是flex，設(shè)置子元素的位置。

5.all：修改所有元素或其父元素的屬性為初始值。除了 unicode-bidi 和 direction。

6.alt:小程序中的解釋是這樣的。不過不知道怎么用，看情況應(yīng)該是只支持Safari9

Provides alternative text for assistive technology to replace the genenerated content of a ::before or ::after element.

(Safari 9)

7.animation：動畫屬性。詳細(xì)的可查看官方APIwx.createAnimation(OBJECT)

8.animation-deley：設(shè)置動畫在啟動前的延遲間隔。

9. animation-direction: 取值：alternate，alternate-reverse，normal，reverse。指定是否應(yīng)該輪流反向播放動畫。

10.animation-duration: 動畫指定需要多少秒或毫秒完成。

11.animation-fill-mode: 取值：backwards，both，forwards，none。規(guī)定當(dāng)動畫不播放時(當(dāng)動畫完成時，或當(dāng)動畫有一個延遲未開始播放時)，要應(yīng)用到元素的樣式。

12.animation-iteration-count：定義動畫播放的次數(shù)。取值：infinite(永遠(yuǎn)播放)，或者一個數(shù)字。

13.animation-name:屬性為 @keyframes 動畫指定名稱。

14.animation-play-state:取值：running，pause。 指定動畫是否正在運(yùn)行或已暫停。

15.animation-timing-function: 指定動畫將如何完成一個周期。

取值：linear(動畫從頭到尾的速度是一樣的。)，

ease(動畫以低速開始，然后加快，在結(jié)束前變慢。)，

ease-in(動畫以低速開始)，

ease-out(動畫以低速結(jié)束)，

ease-in-out(動畫以低速開始結(jié)束)，

cubic-bezier(1, 0, 0, 1)(在cubic-bezier函數(shù)中設(shè)置值的方式。)

step-end：相當(dāng)于 steps(1，end)

step-start：相當(dāng)于steps(1，start)。

如何創(chuàng)建一個css的animation? 先看圖：

代碼就跟簡單：在wxml就只有一個 我是動畫。以下的都是wxss中。當(dāng)然小程序的組件基本上都試過了，都可以。

要實(shí)現(xiàn)css的動畫，必須要知道@keyframes規(guī)則。這個規(guī)則就是創(chuàng)建動畫。指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。

[html] view plain copy

view{

width:100px;

height:100px;

background:red;

position:relative;

animation-name:myfirst;

animation-duration:5s;

animation-timing-function:linear;

animation-delay:2s;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

}

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

注意點(diǎn)：不支持類選擇，id選擇。

以上就是a開頭的css屬性在小程序里支持。

看了下b開頭的比較多，就放下面一篇里去。

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

今天星期六，本來想著先玩兩把LOL，不過一想到后天小程序就全面公布了，細(xì)思極恐啊，為了到開發(fā)的時候順暢，還是忍住了玩的沖動，繼續(xù)來熟悉微信小程序里的對css屬性的支持，因?yàn)閎開頭的比較多，大概就是bg了，border，bottom,box等等屬性，先上圖看看有多少：

以上，那詳細(xì)來看看，分個幾大類吧：

一：backface-visibility：屬性定義當(dāng)元素不面向屏幕時是否可見。就是在動畫里旋轉(zhuǎn)后，背面是不是顯示。取值有：visible(可見)，hidden(不可見)。

二：background，背景。之前有單獨(dú)寫背景看這里。

三：behavior：只有IE支持這個屬性。就不說了。

四：block-size:邏輯寬度，取決于元素的writing-mode。Firefox支持。

五：border：邊框。

六：bottom：設(shè)置圖像的底部邊緣。

對于絕對定位元素，bottom屬性設(shè)置單位高于/低于包含它的元素的底邊。

對于相對定位元素，bottom屬性設(shè)置單位高于/低于其正常位置的元素的底邊。

七：box：盒子屬性：

1. box-decoration-break: 取值：clone(克隆)，slice(片式)。詳情，還是看圖：

2.box-shadow：陰影： box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平陰影位置，允許負(fù)值。必須有

v-shaddow：垂直陰影的位置，允許負(fù)值。必須有

blur：模糊距離，可有。

spread：陰影的大小，可有。

color：陰影的顏色?？捎?/span>

inset：從外層的陰影(開始時)改變陰影內(nèi)側(cè)陰影。

3.box-size:取值：box-sizing: content-box|border-box|inherit:

兩個取值的區(qū)別在于是否會將pandding/margin算進(jìn)去。

[html] view plain copy

view{

margin: 20rpx;

padding: 20rpx;

width: 200rpx;

height: 200rpx;

box-shadow: 10px 10px 5px #888888;

box-sizing:content-box;

}

八：break-after,break-before,break-inside:主要是頁面要是分頁的時候?qū)傩浴?/span>