Css3基本用法

1.border-image：将图片规定为包围 div 元素的边框
     1. border-image-source 用在边框的图片的路径。  
        border-image-slice  图片边框向内偏移。  
        border-image-width  图片边框的宽度。  
        border-image-outset 边框图像区域超出边框的量。  
        border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 
     2. border-radius 向 div 元素添加圆角边框.前提是必须设置border并且当取值为border的一半时，可绘圆。
2. box shadow  向 div 元素添加阴影。
         box-shadow: h-shadow v-shadow blur spread color inset;
          h-shadow 必需。水平阴影的位置。允许负值。 
         v-shadow 必需。垂直阴影的位置。允许负值。
         blur 可选。模糊距离。  
         spread 可选。阴影的尺寸。 
         color 可选。阴影的颜色。请参阅 CSS 颜色值。 
          inset 可选。将外部阴影 (outset) 改为内部阴影。
3. background-clip 规定背景的绘制区域。
         border-box 背景被裁剪到边框盒。 
         padding-box 背景被裁剪到内边距框。 
           content-box 背景被裁剪到内容框。 
4. background-origin 相对于内容框来定位背景图像。
        padding-box 背景图像相对于内边距框来定位。  
        border-box 背景图像相对于边框盒来定位。 
        content-box 背景图像相对于内容框来定位。 
5. background-size 规定背景图像的尺寸。
6. text-overflow 规定当文本溢出包含元素时发生的事情。 
7.text-shadow 基础的文本阴影效果。
     text-shadow: h-shadow v-shadow blur color;
     h-shadow 必需。水平阴影的位置。允许负值。 
     v-shadow 必需。垂直阴影的位置。允许负值。
     blur 可选。模糊的距离。 
     color 可选。阴影的颜色。 
8.text-wrap 规定文本的换行规则。 
      word-break 规定非中日韩文本的换行规则。 
      word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。并且单词也会换行。 
9.transform 向元素应用 2D 或 3D 转换。
     通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
     通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
     通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
     通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
10.过渡translation
    transition-property 规定设置过渡效果的 CSS 属性的名称。 
    transition-duration 规定完成过渡效果需要多少秒或毫秒。 
    transition-timing-function 规定速度效果的速度曲线。 
    transition-delay 定义过渡效果何时开始。 
11.@keyframes 规定动画。 
    animation 所有动画属性的简写属性，除了 animation-play-state 属性。
    animation-name 规定需要绑定到选择器的 keyframe 名称。。 
    animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 
    animation-timing-function 规定动画的速度曲线。 
    animation-delay 规定在动画开始之前的延迟。 
    animation-iteration-count 规定动画应该播放的次数。 
    animation-direction 规定是否应该轮流反向播放动画。 
12.opacity：设置div元素的不透明度。（0为完全透明，1为完全不透明）