css3易混淆属性详解

1.background,  background-color,   color

 （1）background：在一个声明中设置所有属性：

　　如：background: #00FF00 url(bgimage.gif) no-repeat fixed top;

 　　可用的属性有：

　　①background-color: 背景颜色：

　　可能有的值：-1-:  color_name,

　　　　　　　　-2-:  hex_number,

　　　　　　　　-3-:  rgb_number,

　　　　　　　　-4-:  transparent透明,

　　　　　　　　-5-:  inherit

　   ②background-position: 背景图像的位置：

　　可能有的值：-1-:  top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right

　　　　　　　　-2-:  x% y% (如：10%,10%)

　　　　　　　　-3-:  xpos ypos (如：10px,10px)

　   ③background-size: 背景图像的尺寸：

　　可能有的值：-1-:  length (如：10px 20px  如果只设置一个值，则第二个值会被设置成auto)

　　　　　　　　-2-:  percentage (如：10%,10%)

　　　　　　　　-3-:  cover 把图像扩展至足够大，已使背景图像完全覆盖背景区域。

　　　　　　　　-4-:  contain　把图像扩展至最大尺寸，使其高度和宽度完全适应内容区域。

　   ④background-repeat: 如何重复背景图片：

　　可能有的值：-1-:  repeat

　　　　　　　　-2-:  repeat-x (如：10%,10%)

　　　　　　　　-3-:  repeat-y

　　　　　　　　-4-:  no-repeat  背景图只显示一次

　　　　　　　　-5-:  inherit

　   ⑤background-origin: 规定 background-position 属性相对于什么位置来定位：

　　可能有的值：-1-:  padding-box 背景图像相对于内边距框来定位。

　　　　　　　　-2-:  border-box 背景图像相对于边框盒来定位。

　　　　　　　　-3-:  content-box 背景图像相对于内容框来定位。

　   ⑥background-clip: 规定背景的绘制区域：

　　可能有的值：-1-:  border-box 背景被裁剪到边框盒。

　　　　　　　　-2-:  padding-box 背景被裁剪到内边距框。

　　　　　　　　-3-:  content-box 背景被裁剪到内容框。

　   ⑦background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动：

　　可能有的值：-1-:  scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

　　　　　　　　-2-:  fixed 当页面的其余部分滚动时，背景图像不会移动。

　　　　　　　　-3-:  inherit 

　   ⑧background-image: 要使用的背景图像：

 

 

 （2）background-color：前面介绍了。。。。

 （3）color：字体颜色

 

2.transition, transform, translate

（1）transition：规定了四个过渡属性：

　　①transition-property: 规定设置过渡效果的 CSS 属性的名称。

　　②transition-duration: 规定完成过渡效果需要多少秒或毫秒。

　　③transition-timing-function: 规定速度效果的速度曲线。

　　④transition-delay: 定义过渡效果何时开始。

（2）transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜:

　　transform: none|transform-functions;

值	描述	测试
none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

 

（3）translate：各个方向位移，详细属性如上表: