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

      

      

  • 相关阅读:
    逆向路由器固件之敏感信息泄露 Part2
    隐匿在iOS文件系统中的隐私信息
    使用Arduino模块实施无线信号的重放攻击
    逆向路由器固件之解包 Part1
    maven 多模块项目
    java中Map,List与Set的区别(转)
    mysql-开启慢查询&所有操作记录日志
    maven阿里云中央仓库
    yii2 RESTful api的详细使用
    Yii2 基于RESTful架构的 advanced版API接口开发 配置、实现、测试 (转)
  • 原文地址:https://www.cnblogs.com/handsome-jm/p/8005576.html
Copyright © 2011-2022 走看看