background
css1：
background: background-color url(#) repeat attachment position;
cc3新增:
background-size :定义背景图片位置，两个值：水平和垂直偏移量
background-size : x y;
background-clip ：指定背景绘制区域。共有 3 种情况：
（1） border-box 背景被裁剪到边框盒
（2） padding-box 背景被裁剪刀内边距框
（3） content-box 背景被裁剪到内容框
background-origin ：设置元素背景图片的原始起始位置
（1）border-box
（2）padding-box
（3）content-box
background-origin ：border-box || padding-box || content-box；
background-image: 指定一个或多个图片 ，或指定线性渐变或径向渐变
(1)指定图片 ： background-image: url() , url(); //注意第一张图是放在最上面。
(2)渐变 :
线性渐变:
background-image: linear-gradient(方向 , color1, color2, color3…)
background-image: linear-gradient(角度 , color1, color2, color3…)
例子 ： background-image: linear-gradient(to bottom right, red , yellow);
注意：1.指定角度渐变时，要注意旋转方向。 2.在指定color时，也可指定一个百分比数，指渐变从哪开始。3.重复渐变也有。
径向渐变 ：
从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)
background: radial-gradient(center, shape size, start-color, …, last-color);(默认颜色结点均匀分布)
text
文本阴影(text-shadow)
该属性用于给文字设置阴影效果,一共有 4 个值。第一个值为水平偏移量,第二
个值为竖直偏移量,第三个值为模糊距离,第四个值为颜色。
换行
word-break 属性规定自动换行的处理方法。共有 3 个值:normal break-all keep-all
新文本属性
1、text-align-last 属性规定如何对齐文本的最后一行
2、text-overflow 属性规定当文本溢出包含元素时该如何处理。
transform
（1）平移 ： translate(x,y) 将div平移x,y;
（2）旋转 ： rotate(angle) 将div转转angle个角度
（3）放缩 ： scale(x,y) 将div进行放缩
（4）倾斜 ： skewX(angle) 将div倾斜angle个角度
注意：倾斜、放缩都会有一个轴线，div会根据这根轴线进行倾斜、放缩。
transform 3D;
(1)旋转 ：rotateX(angle) rotateY(angle) rotateZ(angle) rotate3D(x,y,z,angle)
其中 0 注意 ： 3D的转化看起来似乎与2D没什么不同，但它是真实3D转动，就好像一本书从正面翻到侧面，这是真正的3D转动。 (2)平移：比2D多了一个translateZ(z) . translate3d(x,y,z) 不可省略参数。 (3)缩放: 比2D多了一个scaleZ 。 transform-origin 更改转化点的位置(旋转、放缩的中心点) 转化矩阵，emmmm这个等用到在学吧，贼难记住 transform-style：指定嵌套元素是怎样在三维空间中呈现。 transform-style: flat|preserve-3d; backface-visibility:定义当元素不面向屏幕时是否可见。 backface-visibility: visible|hidden; perspective 定义 3D 元素距视图的距离，以像素计。即Z轴距离。 transition 过渡 当某个css需要平滑的从一个值过渡到另一个值的时候就可以用上了，这是一个非常强大的动画效果。 transition-property: none || all || 指定要过渡的css名称（如color）; transition-duration: time ; 指过度所用的时间。 指定以上两个过渡效果就已经成立！额外css： transition-timing-function : 过渡速度的快慢 （1） linear ; //以线性的速度过渡css （2） ease ; //平滑过渡 （3） ease-in ;//先慢后快 （4）ease-out; //先快后慢 （5）ease-in-out;//先慢后快，再慢 （6）cubic-bezier(n,n,n,n);//cubic-bezier函数变化 transition-duration: time ; //指定过渡触发之后过多少秒后开始过渡css transition整合 transition: property duration timing-function delay; animation 动画 作用:animation 属性是一个简写属性,用于设置六个动画属性 语法:animation: name duration timing-function delay iteration-count direction 说明: animation-name : “String” ; //规定需要绑定到选择器的 keyframe 名称 animation-duration : time ; //规定完成动画所花费的时间,以秒或毫秒计 animation-timing-function 参数如上的transition-timing-function; // 规定动画的速度曲线 animation-delay : time; //规定在动画开始之前的延迟 animation-iteration-count : n | infinite; //规定动画应该播放的次数 说明:n 定义动画播放次数的数值,infinite 规定动画应该无限次播放 animation-direction normal|alternate; //规定是否应该轮流反向播放动画 说明:normal 默认值,动画应该正常播放,alternate 动画应该轮流反向播放 注意:请始终规定 animation-duration 属性,否则时长为 0,动画不会播放 @keyframes 属性 作用:通过 @keyframes 规则,创建动画 说明:创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式,在动画过程中,能够 多次改变这套 CSS 样式,以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%,0% 是动画的开始时间,100% 是动画的结束时间 例子： div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; } @keyframes mymove { 0% { top: 0px; } 25% { top: 200px; } 75% { top: 50px } 100% { top: 100px; } } 其他动画属性： animation-play-state 属性 作用:animation-play-state 属性规定动画正在运行还是暂停 语法:animation-play-state: paused | running; 说明:paused 规定动画已暂停,running 规定动画正在播放 注释:可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画 animation-fill-mode 属性 作用:animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见 语法:animation-fill-mode : none | forwards | backwards | both; 说明:none 不改变默认行为,forwards 当动画完成后,保持最后一个属性值(在最后一 个关键帧中定义),backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义),both 向前和向后填充模式都被应用 will-change 作用:提前通知浏览器元素将要做什么动画,让浏览器提前准备合适的优化设置 语法:will-change:auto | 说明:auto 表示没有特别指定哪些属性会变化,浏览器需要自己去猜,然后使用浏览器经常使用的一些常规方法优化 最后建议一下css3都拿张图片或者div来一点一点实践一下，css在做特效方面非常有效。
function(){ //外汇隔夜利息 www.fx61.com/interest.html