一、新增选择器

结构伪类选择器

二、新增属性

border-image——边框图片
border-radius——边框圆角
border-shadow——阴影
背景
background-image——背景图片
background-size——尺寸
background-origin——位置区域
background-clip——裁剪属性
渐变色
linear-gradient(direction, color-start1, color-stop1)——线性渐变
radial-gradient(shape size at position, start-color, ..., last-color)——由中心向周围渐变
文本效果
text-shadow
box-shadow
text-overflow: clip/ellipsis/string——文本溢出显示形式
字体
@font-face{...}
三、重要属性
1、2D、3D转换——transform
位移——translate(x,y)、translateX(n)、translateY(n)、translateZ(z)、translate3d(x,y,z)
缩放——scale(x,y)、scaleX(n)、scaleY(n)、scaleZ(z)、scale3d(x,y,z)
旋转——rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle)
倾斜——skew(x-angle,y-angle)、skewX(angle)、skewY(angle)
2、过渡动作——transition
transition-property ——规定设置过渡效果的 CSS 属性的名称。
transition-duration——规定完成过渡效果需要多少秒或毫秒。
transition-timing-function——规定速度效果的速度曲线。
transition-delay——定义过渡效果何时开始。

运动速度就是曲线的斜率大小
曲线网站

animation是以下属性的缩写：

@ keyframes语法如下：

@ keyframes animationname {
    keyframes-selector {
        property: style;
    }
}

display:flex;——采用 Flex 布局的元素，称为 flex 容器。它的所有子元素自动成为容器成员，称为 flex 项目。

flex-flow: flex-direction || flex-wrap;

flex-direction: row | row-reverse | column | column-reverse;——主轴方向（项目排列方向）
flex-wrap: nowrap（不换行） | wrap（换行） | wrap-reverse（换行，倒序）;——超出换行
justify-content: flex-start | flex-end | center | space-between | space-around;——主轴对齐方式（横轴）
align-items: flex-start | flex-end | center | baseline | stretch;——纵轴对齐方式
align-content——堆叠伸缩行的对齐方式

order——在父元素里的排序，小的在前
flex: none | flex-grow |flex-shrink|flex-basis
flex-grow——根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
若盒子的basis总和小于父盒子宽度，则剩余的宽度按grow比例分配。
flex-shrink——根据弹性盒子元素所设置的收缩因子作为比率来收缩空间
若盒子的basis总和大于父盒子宽度，则按子盒子shrink比例压缩，例如1:1则子盒子等比例压缩。
flex-basis——设置或检索弹性盒伸缩基准值

@media mediatype and | not | only (media feature){
    CSS-Code;
}