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:主要是页面要是分页的时间属性。。