2017年，微信小程序css樣式已經是當下最熱門的話題，下面將從多方面來談談微信小程序css樣式相關的內容。

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

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

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

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

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

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

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

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

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

(Safari 9)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何創建一個css的animation? 先看圖：

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

要實現css的動畫，必須要知道@keyframes規則。這個規則就是創建動畫。指定一個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;}

}

注意點：不支持類選擇，id選擇。

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

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

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

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

以上，那詳細來看看，分個幾大類吧：

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

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

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

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

五：border：邊框。

六：bottom：設置圖像的底部邊緣。

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

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

七：box：盒子屬性：

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

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

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

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

blur：模糊距離，可有。

spread：陰影的大小，可有。

color：陰影的顏色。可有

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

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

兩個取值的區別在于是否會將pandding/margin算進去。

[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:主要是頁面要是分頁的時候屬性。