1. background-origin
设置或检索对象的背景图像计算background-position时的参考原点(位置)。
2. background-clip
指定对象的背景图像向外裁剪的区域。
取值:
padding-box: 从padding区域(不含padding)开始向外裁剪背景。
border-box: 从border区域(不含border)开始向外裁剪背景。
content-box: 从content区域开始向外裁剪背景。
text: 从前景内容的形状
3. background-size
检索或设置对象的背景图像的尺寸大小。
该属性提供2个参数值(特性值cover和contain除外)。
如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
4. background
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title></title> <meta name="author" content="Jo,7777@qq.com" /> <meta name="copyright" content="www.doyoe.com" /> <style> .test{height:300px;background:#eee url(skin/p_103x196_1.jpg) no-repeat scroll 50px 30px;} </style> </head> <body> <div class="test">定义单一背景图像</div> </body> </html>
复合属性。设置对象的背景特性。
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置
5. 多重背景
复合属性。检索或设置对象的多重背景图像(背景色background-color不能设置多重)。
一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上
background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-repeat:10px 20px,50px 60px,90px 100px;
background-origin:content-box;
background-clip:padding-box;
background-size:50px 60px;
6. list-style-type
设置或检索对象的列表项所使用的预设标记。
若list-style-image属性为none或指定图像不可用时,list-style-type属性将发生作用。
仅作用于具有display值等于list-item的对象(如li对象)。
注意:ol对象和ul对象的type特性为其后的所有列表项目(如li对象)指明列表属性。
7. list-style-image
设置或检索作为对象的列表项标记的图像。
若list-style-image属性为none或指定图像不可用时,list-style-type属性将发生作用。
8. transform
1. translate()
指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
2. translateX()
指定对象X轴(水平方向)的平移
3. translateY()
指定对象Y轴(垂直方向)的平移
4. rotate()
指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义
5. scale()
指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
6. skew()
指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
7. translate3d()
9. transform-origin
设置或检索对象以某个原点进行转换。
该属性提供2个参数值。
如果提供两个,第一个用于横坐标,第二个用于纵坐标。
如果只提供一个,该值将用于横坐标;纵坐标将默认为50%
10. transition-property
检索或设置对象中的参与过渡的属性。
默认值为:all。默认为所有可以进行过渡的css属性。
如果提供多个属性值,以逗号进行分隔。
11. transition-duration
检索或设置对象过渡的持续时间。
如果提供多个属性值,以逗号进行分隔。
12. transition-timing-function
检索或设置对象中过渡的动画类型。
如果提供多个属性值,以逗号进行分隔。
linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>):
13. transition-delay
检索或设置对象延迟过渡的时间。
如果提供多个属性值,以逗号进行分隔。
14. transition
复合属性。检索或设置对象变换时的过渡。
transition:border-color .5s ease-in .1s, background