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
     
  • 相关阅读:
    React 组件之间如何交流
    VMC INJECTION(开源JAVA模板框架)
    <th><td>表单用法
    弹性盒子
    骰子的布局(flex)
    javascript中的作用域
    js引用类型和基本类型、隐式类型转换以及强制类型转换面试题
    css的content属性,以及如何通过css content属性实现css计数器?
    CSS实现:一个矩形内容,有投影,有圆角,hover状态慢慢变透明
    百度元宵节动画
  • 原文地址:https://www.cnblogs.com/caoruichun/p/11421624.html
Copyright © 2011-2022 走看看