用css pie.htc解决IE8 不支持 border-radius 属性问题（圆角）

原创

于 2019-01-16 11:41:54 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #IE #PIE.htc

本文详细介绍了如何使用css pie.htc解决IE8及以下版本不支持border-radius属性的问题，包括效果展示、主要支持的CSS3属性、常见问题及解决方案，并提供了相关演示地址和资源下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css pie.htc使用心得（解决IE8以及一下不能设置圆角问题）

用css pie.htc解决IE8 不支持 border-radius 属性问题

一、效果、demo、下载地址

国内：
演示地址：https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html （感谢大佬：张鑫旭）
国外：
官网以及演示地址： http://css3pie.com/

二、PIE支持的主要CSS3属性详解

border-radius圆角

css代码:

 .node2 {
  background-color 		: #c0bffb;
  width                 : 289px;
  height                : 40px;
  z-index 				: 10;
  border: 0px solid #b9aed9;
  
  /*以下下是要添加的PIE.htc代码*/
  position:relative; /*一定要加，否则不显示。注意：父类也要添加相同属性，否则会错位，下面会详细介绍*/ 
  border-radius: 15px; /*这个不能删，虽然IE8不支持这个属性，但是PIE.htc会用到*/
  -webkit-border-radius: 15px; /*以下这两个是PIE.htc设置圆角的属性*/
  -moz-border-r