CSS3

圆角

border-radius
使用一个半径确定一个圆形，使用两个半径时确定一个椭圆
一个值可规定四个角的圆角半径
两个值分别对应左上角以及对角和右上角以及对角的圆角半径
四个值分别对应左上角开始按顺时针顺序的每个角的圆角半径，

border-radius: 1em/5em;
/* 等价于： */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

阴影

box-shadow

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

过渡

transitions
transition: <property> <duration> <timing-function> <delay>;
.addEventListener("transitionend", updateTransition, true);

动画

animations
通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。

animation-duration: 3s; //动画时长
animation-name: slidein; //@keyframes
animation-iteration-count: infinite; //动画循环次数
animation-direction: alternate; //指示动画是否反向播放

flex布局

https://www.jianshu.com/p/6d5014a97b16