标签：
今天的属性比较有意思，带上过渡效果，让人眼前一亮，也让我知道以前不怎么知道的
属性。
action~
1、background-origin
设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat 此属性才会生效。
background-origin ： border-box | padding-box | content-box;
div{
background: url(地址) no-repeat;
background-origin:border-box;
}
2、background-clip
设定背景图像向外裁剪的区域。
background-clip ： border-box | padding-box | content-box | text
3、background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进 行伸缩。
auto 默认值，不改变背景图片的原始高度和宽度。
<长度值> 成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放。
<百分比> 0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上。
cover 可选。阴影的尺顾名思义为覆盖，即将背景图片等比缩放以填满整个容器寸。
contain 可选。阴影的颜色。请参阅 CSS 颜容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止色值。
div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
4、背景样式缩写
background: 背景色 背景图片 背景平铺方式 背景定位
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}
5、多重背景
是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加
注意：
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明 所有背景图片应用该属性值。
background-color 只能设置一个。
background: url(image) no-repeat center center/100px 100px,url(image2) no-repeat left center/300px 300px;
6、list-style-type
控制列表每一项的头部图标
ul { list-style-type:disc;} /*实心圆*/
ul { list-style-type:circle;} /*空心圆*/
ul { list-style-type:square;} /*实心方块*/
ul { list-style-type:none;} /*不显示项目符号*/
ol { list-style-type:decimal;} /*阿拉伯数字*/
ol { list-style-type:lower-roman;} /*小写罗马数字*/
ol { list-style-type:upper-alpha;} /*大写英文字母*/
7、ist-style-image
用图片来定义列表的每一项的头部图标
ul {list-style-image:url(images/arrow.gif)}
8、transform
transform-function包含以下几个方法：
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
transform-origin:任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
translateX()： 指定对象X轴（水平方向）的平移
translateY()： 指定对象Y轴（垂直方向）的平移
rotate()： 指定对象的2D
rotation（2D旋转），需先有 <‘ transform-origin ‘> 属性的定义
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
div{
width: 100px;
height: 100px;
background: red;
transform: translate(20px,20px) scale(2,2) skew(40deg,40deg);
transform-origin: 0 0;
}
transform: translateX(100px) translateY(200px);
transform: translate3d(100px,200px,300px);
9、过渡动画
1. transition-property(过渡属性)
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
基本上可以把以上属性归纳为带有数值的 属性，都支持过渡动画
（其中visibility可以看成 是0和1，它可以常常搭配opacity属性，
来实现一 个元素渐隐渐显并最终隐藏或显示）。
最简单写法 是直接用all代表所有属性
div{
-webkit-transition-property:width,height,color;
transition-property:width,height,color;
}
2.transition-duration(过渡所需时间)
transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，
也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
-webkit-transition-duration: .5s;
transition-duration: .5s;
3. transition-timing-function(动画--过渡函数)
指过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：
ease:默认值，逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))
linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))
ease-in:加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out:减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1.0))
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)
-webkit-transition-timing-function:ease-in;
transition-timing-function:ease-in;
4. transition-delay(动画--过渡延迟时间)
transition-delay属性和transition-duration属性极其类似，
不同的是transition-duration是用来设置过渡动画的持续时间，
而transition-delay主要用来指定一个动画开始执行的时间，
也就是说当改变元素属性值后多长时间开始执行。
-webkit-transition-delay:.1s;
transition-delay:.1s;
5. transition(过渡)
-webkit-transition: all .5s ease-in .1s;
transition: all .5s ease-in .1s;
知识补充：
到目前为止，transition功能支持从一个属性值平滑过渡到另一个属性值。
使用transition功能实现动画的缺点是只能指定属性的开始值与终点值，然后
在这两个属性值之间实现平滑过渡，不能实现更为复杂的动画效果。
缩写：
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
-o-transition: background-color 1s linear, color 1s linear, width 1s linear;
标签：
原文地址：http://www.cnblogs.com/zhangzhicheng/p/5766662.html
