• 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 */
    

      

      

  • 相关阅读:
    js中setTimeout、setInterval、 clearInterval方法简介
    分享一个VS2008漂亮的黑色主题
    最简单的设计模式
    记一次查数据的需求
    Oracle常用存储过程写法
    关于域名解析
    使用PHP打造QQ空间神奇图片
    自制小工具含源码——SPTC上海交通卡余额查询
    自制小工具含源码——博客园图床ImageBed
    不可不知的mysql 常用技巧总结
  • 原文地址:https://www.cnblogs.com/handsome-jm/p/8005576.html
Copyright © 2020-2023  润新知