zoukankan      html  css  js  c++  java
  • CSS3 兼容性写法

    transform

    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    

     transform-origin

    transform-origin:20% 40%;
    -ms-transform-origin:20% 40%; 		/* IE 9 */
    -webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */
    -moz-transform-origin:20% 40%;		/* Firefox */
    -o-transform-origin:20% 40%;		/* Opera */
    

    线性渐变 - 从上到下(默认情况下)

    下面的实例演示了从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:

    #grad {
      background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
      background: linear-gradient(red, blue); /* 标准的语法 */
    }
    

    线性渐变 - 从左到右

    下面的实例演示了从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:

    #grad {
      background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, red , blue); /* 标准的语法 */
    }
    

    线性渐变 - 对角

    你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

    下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:

    #grad {
      background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
      background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
    }
    

    使用角度

    如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。

    #grad {
      background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
      background: linear-gradient(180deg, red, blue); /* 标准的语法 */
    }
    

      

    box-sizing属性

    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
    

      

      

  • 相关阅读:
    正则表达式匹配中国区的电话号码
    落户
    存储过程与函数的区别转载
    asp.net页面从初始化到卸载事件顺序转
    .net连接Oracle数据库 常见问题
    sql触发器的类型
    (转) C++中extern “C”含义深层探索
    vmware 收缩越来越大的磁盘文件
    (转)一些常用的网站
    工具:P/Invoke Interop Assistant
  • 原文地址:https://www.cnblogs.com/handsome-jm/p/8005576.html
Copyright © 2011-2022 走看看