zoukankan      html  css  js  c++  java
  • 使IE浏览器支持CSS3属性(圆角、阴影、渐变、文字阴影)

    CSS3的大多新属性(比如:圆角、阴影、渐变、文字阴影等)在 FF、Chrome、Opera都还支持,但是IE 6-8是一点也不支持的,今天提供PIE.htc解决IE浏览器对CSS3属性的支持问题,让IE也能实现一些常见的CSS3效果,如圆角(border-radius),盒阴影(box-shadow),文字阴影(text-shadow) 背景渐变(gradient),多图片背景(multiple background images)。

    一. htc文件下载地址http://github.com/lojjic/PIE/downloads
    二.  CSS文件测试代码
      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml">
      3. <head>
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5. <title></title>
      6. <style>
      7. .shadow{
      8. order: 1px solid #696;
      9. padding: 60px 0;
      10. text-align: center; 200px;
      11. -webkit-border-radius: 8px;
      12. -moz-border-radius: 8px;
      13. border-radius: 8px;
      14. -webkit-box-shadow: #666 0px 2px 3px;
      15. -moz-box-shadow: #666 0px 2px 3px;
      16. box-shadow: #666 0px 2px 3px;
      17. background: #FF99AF;
      18. background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FF99AF), to(#CDEE33));
      19. background: -webkit-linear-gradient(#FF99AF, #CDEE33);
      20. background: -moz-linear-gradient(#FF99AF, #CDEE33);
      21. background: -ms-linear-gradient(#FF99AF, #CDEE33);
      22. background: -o-linear-gradient(#FF99AF, #CDEE33);
      23. background: linear-gradient(#FF99AF, #CDEE33);
      24. -pie-background: linear-gradient(#FF99AF, #CDEE33);
      25. behavior: url(css/PIE/PIE.htc);   //PIE.htc文件路径,该文件路径是相对于html页面的文件路径,如果用到.css文件,该文件路径依然是相对于html页面的路径
      26. }
      27. </style>
      28. </head>
      29. <body>
      30. <div class="shadow">
      31. CSS3属性(圆角、阴影、渐变、文字阴影)
      32. </div>
      33. </body>
      34. </html>

    三. 显示效果(IE8浏览器截图)

    使IE浏览器支持CSS3属性(圆角、阴影、渐变、文字阴影)

  • 相关阅读:
    java反射机制
    Java注解的使用
    C3P0数据库Jar包的使用
    异常处理
    集合的概念
    程序员必备之二分查找
    ArrayList的使用
    HashMap的使用
    Final的使用
    类的基本结构
  • 原文地址:https://www.cnblogs.com/siyecao2010/p/3222958.html
Copyright © 2011-2022 走看看