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:各个方向位移,详细属性如上表:

 

原文地址:https://www.cnblogs.com/xinxingyu/p/4744479.html