IE兼容css3的圆角和阴影和渐变

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

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

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

<!--[if lt IE 9]>

<![endif]-->

<!--[if IE 9]>

<![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

插件地址：http://css3pie.com/documentation/pie-js/

个人纪录：https://note.youdao.com/web/#/file/recent/note/8867F2632C8542939425373359AAFAE3/