css3属性linear-gradient兼容ie9问题

1.在vue-cli构建的商城项目中发现background-image: linear-gradient(to right, #ff0067, #ff5698);在ie9中失效，无法显示任何内容。

    解决方案：IE可以依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr 表示终点颜色。GradientType 表示渐变类型，0 为缺省值，表示垂直渐变，1 表示水平渐变。
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#ff0067, endColorstr=#ff5698);

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#ff0067, endColorstr=#ff5698)";

以上写法可实现ie8和ie9的渐变效果。

但是会出现该元素上的border-radius会失效，无法实现圆角效果。可以在外部套一层父元素。在父元素上通过border-radius属性实现圆角。把超出部分隐藏即可。代码如下：

.father{

    overflow: hidden;

    border-radius:10px;

}

.son{

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#ff0067, endColorstr=#ff5698);

     -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#ff0067, endColorstr=#ff5698)";

     background-image: linear-gradient(to right, #ff0067, #ff5698);

}

以上代码可实现兼容到ie8和ie9的渐变和圆角效果。