zoukankan      html  css  js  c++  java
  • IE兼容css3的圆角和阴影和渐变

    注意路径,最好是直接使用 URL 的绝对路径,

    如果无法显示可能是 服务器端不支持该类型文件格式的解析,可以在服务器配置文件的

    mime.types文件的末尾增加一行:text/x-component htc

    <!--[if lt IE 9]>
    <script type="text/javascript" src="./dd/PIE_IE678.js"></script>
    <![endif]-->
    <!--[if IE 9]>
    <script type="text/javascript" src="./dd/PIE_IE9.js"></script>
    <![endif]-->
     
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
      <!--[if lt IE 9]>
      <script type="text/javascript" src="./dd/PIE_IE678.js"></script>
    <![endif]-->
      <!--[if IE 9]>
      <script type="text/javascript" src="./dd/PIE_IE9.js"></script>
    <![endif]-->
    
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        .o {
          /* position: relative; */
          width: 100px;
          height: 100px;
          /* background-size: 50px 50px; */
          background-color: #0ae;
          /* background-image: -webkit-linear-gradient(rgba(255, 19, 19, 0.2) 50%, transparent 50%, transparent);
          background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
          background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); */
          /* -pie-background: linear-gradient(rgba(248, 248, 248, 0.2) 50%, transparent 50%, transparent) 0 0 / 50px rgb(7, 185, 255); */
          border-radius: 12px;
          -pie-background: linear-gradient(#9F9, rgb(241, 72, 6));
          /* position: relative; */
          /* behavior: url(pie.htc); */
          /* behavior: url(PIE.htc); */
    
        }
    
        .n {
          /* position: relative; */
          width: 100px;
          height: 100px;
          background: red;
          border-radius: 12px;
          box-shadow: 10px 10px 10px red;
          display: none;
        }
    
        .e {
          position: absolute;
          border: 1px solid red;
          width: 100px;
          height: 100px;
          left: 100px;
          top: 100px;
        }
      </style>
    </head>
    
    <body>
      <div class="o"></div>
      <div class="n"></div>
      <div class="e"></div>
      <button onclick="dd()">dianji </button>
      <button onclick="dd1()">dianji1 </button>
    </body>
    
    <script>
      $(function () {
        if (window.PIE) {
          alert(2)
          $('.o,.n,.e').each(function () {
            //$(this).css("position", "relative");
            PIE.attach(this);
          });
        }
      });
    
      function dd() {
        $('.n').show()
      }
    
      function dd1() {
        $('.n').hide()
      }
    </script>
    
    </html>
    View Code
     
  • 相关阅读:
    pychram 2018-01 安装pyQT5报错
    pyqt 8行内就可以跑一个浏览器
    sql server无log ldf日志文件附件mdf数据库重新生成ldf日志文件
    解决Specifying a namespace in include()withou providing an app_name
    Java 连接池的工作原理(转)
    使用from __future__ import unicode_literals时要注意的问题
    详细介绍Redis的几种数据结构以及使用注意事项(转)
    再谈Redis应用场景(转)
    Redis的LRU机制(转)
    深入理解Redis主键失效原理及实现机制(转)
  • 原文地址:https://www.cnblogs.com/caoruichun/p/11421624.html
Copyright © 2011-2022 走看看