zoukankan      html  css  js  c++  java
  • 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:各个方向位移,详细属性如上表:

     

  • 相关阅读:
    mysql 快速生成百万条测试数据
    解决mysql插入数据l出现"the table is full"的问题
    php 判断设备是手机还是平板还是pc
    golang格式化输出-fmt包用法详解
    阿里云用smtp无法发送邮件
    百度文本编辑器的toolbars属性值描述
    beego register db `default`, sql: unknown driver "mysql" (forgotten import?)
    MQ知识点汇总
    redis知识点汇总
    知识体系
  • 原文地址:https://www.cnblogs.com/xinxingyu/p/4744479.html
Copyright © 2011-2022 走看看