[分享]css3属性支持ie

CSS3是Web前端开发中非常重要的一个技术，它带来了许多新的功能和特性，例如圆角、阴影、渐变、动画等等。然而，由于Internet Explorer的兼容性问题，我们在编写CSS3时需要考虑IE的支...

CSS3是Web前端开发中非常重要的一个技术，它带来了许多新的功能和特性，例如圆角、阴影、渐变、动画等等。然而，由于Internet Explorer的兼容性问题，我们在编写CSS3时需要考虑IE的支持情况。

目前，IE的最新版本是IE11，它对CSS3属性的支持情况也比早期的版本要好。下面是一些常用的CSS3属性和IE的支持情况。

/* 圆角 */
border-radius: 10px;
-webkit-border-radius: 10px; /* Safari和Chrome */
-moz-border-radius: 10px; /* Firefox */
-ms-border-radius: 10px; /* IE9+ */
-o-border-radius: 10px; /* Opera */

/* 阴影 */
box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 5px 5px 5px #888888; /* Safari和Chrome */
-moz-box-shadow: 5px 5px 5px #888888; /* Firefox */
-ms-box-shadow: 5px 5px 5px #888888; /* IE9+ */
-o-box-shadow: 5px 5px 5px #888888; /* Opera */

/* 渐变 */
background: linear-gradient(to bottom, #ffffff, #000000);
background: -webkit-linear-gradient(to bottom, #ffffff, #000000); /* Safari和Chrome */
background: -moz-linear-gradient(to bottom, #ffffff, #000000); /* Firefox */
background: -ms-linear-gradient(to bottom, #ffffff, #000000); /* IE10+ */
background: -o-linear-gradient(to bottom, #ffffff, #000000); /* Opera */

/* 动画 */
@keyframes slidein {
  from { margin-left: 100%; width: 300%; }
  to   { margin-left: 0%; width: 100%; }
}
animation: slidein 2s ease-in-out forwards;
-webkit-animation: slidein 2s ease-in-out forwards; /* Safari和Chrome */
-moz-animation: slidein 2s ease-in-out forwards; /* Firefox */
-ms-animation: slidein 2s ease-in-out forwards; /* IE10+ */
-o-animation: slidein 2s ease-in-out forwards; /* Opera */ 

可以看到，现在IE对CSS3属性的支持已经比较完善了，但仍然有一些属性不被支持，例如flexbox、grid等一些高级布局属性。解决这些问题的方法主要是使用兼容性前缀（-webkit-、-moz-、-ms-、-o-等），以及在必要时使用JS库和Polyfill。