wxss学习《五》所有以a，b开头的属性

整理下小程序里所有的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就只有一个 <view >我是动画</view>。以下的都是wxss中。当然小程序的组件基本上都试过了，都可以。

要实现css的动画，必须要知道@keyframes规则。这个规则就是创建动画。指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

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算进去。

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