CSS3新特性

1.过渡属性-transition

transition: property duration timing-function delay;

这是transition属性的简写形式，其含义是：

名称	描述
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始

2.动画-animation

animation: name duration timing-function delay iteration-count direction;

这是animation属性的简写形式，其含义是：

名称	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画

同时需要创建动画比如：

@keyframes mymove // mymove也就是animation-name要对应的动画名字
{
    from {// 初始属性}
    to {// 动画后的属性}
}

3.转换形状-transform

4.新增选择器

5.阴影-box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

名称	描述
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

在某些不可以使用border设置边框的情况下可以用box-shadow设置边框

box-shadow: 1px 1px black,
​
            1px -1px black,
​
            -1px -1px black,
​
            -1px 1px black;

6.边框-border-image:

图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch）

7.背景- background-clip

9.颜色-rgba

10.弹性盒布局-flex

11.栅格布局-grid

12.盒模型定义-box-sizing

标准盒模型和怪异盒模型，具体之前有写过。

13.媒体查询