css圆形渐变背景，兼容IE filter下border-radius失效的问题

最近有一个需求，一个圆形的渐变颜色背景。
开始动手吧！

标准浏览器：

使用linear-gradient，CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

linear-gradient()语法：

linear-gradient( angle | side-or-corner , ? color-stop);

第一个参数：用角度值指定渐变的方向（或角度）。
第n个参数：用于指定渐变的起止颜色。arguments，多传多个参数。

示例：

background: linear-gradient( 84deg, rgba(242, 90, 137, 1), rgba(231, 42, 31, 1) );
border-radius:50%;

效果如下：

完美！！！

IE浏览器：

虽然一个linear-gradient爽歪歪，但打开IE9一看，border-radius却失效了。

原因是IE10才支持该属性值，IE9下需要使用filter滤镜。

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

语法：

filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)

属性：

enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false
　　true: 默认值。滤镜激活。
　　false:滤镜被禁止。
　　
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
　　其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
　　
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。

示例：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = #F25A89, endColorstr = #E72A1F);

如此，IE9下已经可以支持渐变背景了，但是border-radius设置却失效了。

我们可以通过添加一个父元素，对父元素设置border-radius，再对超出的范围进行隐藏。

完整代码如下：

HTML部分

<div class="bg-border-radius">
	<div class="bg-linear-gradient">
	   <i class="iconfont icontuwenxiangqing"/>
	 </div>
</div>

CSS部分
此格式为sass，格式不同的，请自行调整。

.bg-border-radius {
      border-radius: 50%;
      overflow: hidden;
      .bg-linear-gradient {
        width: 50px;
        height: 50px;
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = #F25A89, endColorstr = #E72A1F);
        background: linear-gradient(
          84deg,
          rgba(242, 90, 137, 1),
          rgba(231, 42, 31, 1)
        );
      }
    }