css3常用相关属性

表单特性与函数

• placeholder : 输入框提示信息
• autocomplete : 是否保存用户输入值，默认为on，关闭提示选择off
• autofocus : 指定表单获取输入焦点
• list和datalist : 为输入框构造一个选择列表
• list值为datalist标签的id
• required : 此项必填，不能为空
• Pattern : 正则验证 pattern="\d{1,5}“
• Formaction 在submit里定义提交地址

-webkit-filter 滤镜

• 值范围：
  • 0~1 或者 0%~100%
    灰度 -webkit-filter:grayscale(1);
    棕色调 -webkit-filter:sepia(1);
    饱和度 -webkit-filter:saturate(0.5);
    色相旋转 -webkit-filter:hue-rotate(90deg);
    反色 -webkit-filter:invert(1);
    透明度 -webkit-filter:opacity(0.2);
    亮度 -webkit-filter:brightness(0.5);
    对比度 -webkit-filter:contrast(2);
    模糊 -webkit-filter:blur(3px);
    阴影 -webkit-filter:drop-shadow(5px 5px 5px #ccc);

transform 将元素进行2D或3D转换

• rotate(90deg) 旋转函数 取值度数
  • deg 度数
  • transform-origin:x y 旋转的基点

image.png

• skew(90deg) 倾斜函数 取值度数
  • skewX()
  • skewY()

image.png

• scale(2) 缩放函数 取值 正数、负数和小数
  • scaleX()
  • scaleY()

• translate() 位移函数
  • translateX()
  • translateY()

• matrix(a,b,c,d,e,f) 矩阵函数

  • 通过矩阵实现缩放

    • x轴缩放 a=xa c=xc e=x*e;
    • y轴缩放 b=yb d=yd f=y*f;

  • 通过矩阵实现位移

    • x轴位移: e=e+x
    • y轴位移: f=f+y

  • 通过矩阵实现倾斜

    • x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
    • y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

  • 通过矩阵实现旋转

    • a=Math.cos(deg/180*Math.PI);
    • b=Math.sin(deg/180*Math.PI);
    • c=-Math.sin(deg/180*Math.PI);
    • d=Math.cos(deg/180*Math.PI);

  • 变换兼容IE9以下IE版本只能通过矩阵来实现

    • filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
    • IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d