CSS3常用的新特性

圆角

border-radius属性，来实现任意元素的圆角效果
值为1个时，对应四个角
值为2个时，一个值对应两个角

阴影

box-shadow向元素添加一个或者多个阴影

box-shadow：10px 10px 20px grey

第一个值为阴影向x周移动距离
第二个值为阴影向y周移动距离
第三个值为阴影的大小
第四个值为阴影的颜色

补充：

margin：0 auto可以使元素居中

动画

动画就是使元素从一种样式转化成另一种元素的效果

@keyframes创建动画

animation执行动画

animation：name duration timing-function delay iteration-count direction

值	描述
name	设置动画的名称
duration	动画一个周期的速度
timing-function	设置动画效果的速率
delay	延时执行
iteration-count	动画循环次数，infinite无限循环
direction	动画播放的方向
animation-play-state	控制动画播放状态，running播放，paused停止播放

animation-play-state：paused可以通过hover事件，写出鼠标悬停动画停止的效果

timing-function值	介绍
ease	逐渐变慢
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

direction值	介绍
normal	默认，正向播放
alternate	第偶数次为向前播放，第奇数次为反方向播放

opacity为透明度，值从0到1