CSS3文本效果
text-shadow：适用于文本阴影，可以指定是水平阴影还是垂直阴影、模糊的距离以及阴影的颜色。
box-shadow：适用于盒子阴影。同上。可以在::after和::before两个伪元素中添加阴影效果。
text-overflow：文本溢出属性指定应向用户如何显示溢出内容
有两个属性：ellipsis（以省略号的形式隐藏内容）和clip（直接截断内容）
word-wrap：强制换行，但是单词中间不换行
word-break：单词可进行拆分然后换行
CSS3 2D转换
2D变换方法：
translate()：平移
rotate()：在一个给定度数顺时针旋转的元素
scale()：缩放
skew()：倾斜
matrix()：矩阵
为了添加某种效果可以从一个样式转变到另一个的时候，无需使用flash动画或JavaScript，只需要鼠标移动到上面就可以。
我们要实现这样的效果，必须规定两项内容：
指定要添加效果的 CSS属性 和 效果的持续时间
CSS3过渡
所有的过渡属性：
transition：简写属性，用于在一个属性中设置四个过渡属性
transition-property：规定应用过渡的CSS属性的名称
transition-duration：定义过渡效果花费的时间，默认是0
transition-timing-function：规定过渡效果的时间曲线，默认是‘ease‘
transition-delay：规定过渡时间何时开始，默认是0
CSS3弹性盒子（Flex Box）
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex或inline-flex（行内元素设置为Flex布局）将其定义为弹性容器。
注：设为了Flex布局以后，子元素的float、clear和virtical-align属性将失效。
弹性容器内包含一个或多个弹性子元素。
注意：弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性元素的如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行。
修改排列方式：rtl(right to left)
body { direction: rtl; }
弹性容器上的属性共有6个：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
①flex-direcion：决定了主轴的方向（即弹性子元素在父容器中的排列方向）。
语法：flex-direction: row | row-reverse | column | column-reverse
row：横向从左到右排列。默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
②flex-wrap：默认情况下，项目都排在一条线上，该属性定义如果一条轴线排不下，如何换行。
语法：flex-wrap: nowrap | wrap | wrap-reverse
③flex-flow：该属性是flex-direction属性和flex-wrap属性的简写形式，默认值是row nowrap。
④justify-content：定义了项目在主轴上的对齐方式，把弹性项沿着弹性容器的主轴线对齐。
语法：justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都是相等的
space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。
⑤align-items：定义项目在交叉轴上如何对齐。
语法：align-items: flex-start | flex-end | center | baseline | strench
baseline：项目的第一行文字的基线对齐
strench（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
⑥align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
语法：align-content: flex-start | flex-end | center | space-between | space-around | strench(默认值)
弹性子元素上的6个属性：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
①order :定义弹性子元素的排列顺序。数值越小，排列越靠前，默认为0。
语法：order: <integer>
②flex-grow:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
语法：flex-grow: <number>
③flex-shrink:定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。
语法：flex-shrink: <number>
④flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto
⑤flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值是 0 1 auto。建议优先使用这个属性。该属性有两个快捷值： auto(1 1 auto) 和none(0 0 auto)。
⑥align-self：允许单个弹性子元素有与其他子元素不一样的对齐方式。可覆盖align-items属性，默认值为auto，表示继承弹性容器的align-items属性，如果没有父元素，则等同于strench。
