CSS3基础

CSS3基础
CSS3 模块包括：
    选择器 
    框模型 
    背景和边框 
    文本效果 
    2D/3D 转换 
    动画 
    多列布局 
    用户界面
新的边框属性
     border-image 设置所有 border-image-* 属性的简写属性。 
    border-radius 设置所有四个 border-*-radius 属性的简写属性。  
    box-shadow 向方框添加一个或多个阴影。 
新的背景属性

    background-clip 规定背景的绘制区域。 
    background-origin 规定背景图片的定位区域。 
    background-size 规定背景图片的尺寸。 
新的文本属性

    hanging-punctuation 规定标点字符是否位于线框之外。 
    punctuation-trim 规定是否对标点字符进行修剪。 
    text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。  
    text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 
    text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 
    text-outline 规定文本的轮廓。 
    text-overflow 规定当文本溢出包含元素时发生的事情。 
    text-shadow 向文本添加阴影。 
    text-wrap 规定文本的换行规则。 
    word-break 规定非中日韩文本的换行规则。  
    word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
2D Transform 方法

    matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 
    translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 
    translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 
    translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 
    scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 
    scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 
    scaleY(n) 定义 2D 缩放转换，改变元素的高度。 
    rotate(angle) 定义 2D 旋转，在参数中规定角度。 
    skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 
    skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。 
    skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。 
转换属性
    transform 向元素应用 2D 或 3D 转换。  
    transform-origin 允许你改变被转换元素的位置。 
    transform-style 规定被嵌套元素如何在 3D 空间中显示。  
    perspective 规定 3D 元素的透视效果。  
    perspective-origin 规定 3D 元素的底部位置。  
    backface-visibility 定义元素在不面对屏幕时是否可见 
过渡属性
    transition 简写属性，用于在一个属性中设置四个过渡属性。  
    transition-property 规定应用过渡的 CSS 属性的名称。 
    transition-duration 定义过渡效果花费的时间。默认是 0。  
    transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。  
    transition-delay 规定过渡效果何时开始。默认是 0。 
CSS3 动画属性

    @keyframes 规定动画。 
    animation 所有动画属性的简写属性，除了 animation-play-state 属性。  
    animation-name 规定 @keyframes 动画的名称。  
    animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。  
    animation-timing-function 规定动画的速度曲线。默认是 "ease"。  
    animation-delay 规定动画何时开始。默认是 0。  
    animation-iteration-count 规定动画被播放的次数。默认是 1。  
    animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。  
    animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。  
    animation-fill-mode 规定对象动画时间之外的状态。