CSS背景色渐变写法兼容ie6至ie9

要在CSS中实现背景色渐变并且兼容IE6至IE9，需要使用filter属性。下面是详细的步骤：

1. 在CSS样式表中定义需要设置背景色渐变的元素，为了更好的兼容性，建议设置background-color属性为一个默认的颜色。

.gradient{
  width: 200px;
  height: 100px;
  background-color: #F7F7F7; /* 默认的背景色 */
}

1. 在该元素内部编写filter属性，设置颜色渐变情况，首先需要设置起点颜色，和结束颜色。

.gradient{
  /* 其余代码省略 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#9ABCBE', GradientType=0); /* 渐变设置 */
}

在上面的代码中，我们使用progid:DXImageTransform.Microsoft.gradient指定IE浏览器需要使用的过滤器，startColorstr指定了起点颜色的值，endColorstr指定了结束颜色的值，GradientType指定了渐变的类型，为0表示水平渐变，为1时表示垂直渐变。

1. 最后需要加入渐变的方向，可以使用角度值或者关键字来设置渐变方向，由于IE浏览器中无法使用角度值，因此我们需要使用关键字来设置渐变方向。

.gradient{
  /* 其余代码省略 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#9ABCBE', GradientType=0); /* 渐变设置 */
  background: -moz-linear-gradient(top, #F7F7F7 0%, #9ABCBE 100%); /* 火狐浏览器渐变设置 */
  background: -webkit-linear-gradient(top, #F7F7F7 0%, #9ABCBE 100%); /* webkit内核的浏览器渐变设置 */
  background: linear-gradient(to bottom, #F7F7F7 0%, #9ABCBE 100%); /* 非IE浏览器渐变设置 */
}

在上面的代码中，我们使用background属性，分别为不同内核和不同浏览器设置了渐变。而对于IE浏览器，由于background属性会被忽略，因此我们依旧需要使用filter属性来设置渐变。

以下是两个示例：

代码示例一：竖向渐变

/* CSS代码 */
.gradient{
  width: 200px;
  height: 100px;
  background-color: #F7F7F7; /* 默认的背景色 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#9ABCBE', GradientType=0); /* 渐变设置 */
  background: -moz-linear-gradient(top, #F7F7F7 0%, #9ABCBE 100%); /* 火狐浏览器渐变设置 */
  background: -webkit-linear-gradient(top, #F7F7F7 0%, #9ABCBE 100%); /* webkit内核的浏览器渐变设置 */
  background: linear-gradient(to bottom, #F7F7F7 0%, #9ABCBE 100%); /* 非IE浏览器渐变设置 */
}

代码示例二：横向渐变

/* CSS代码 */
.gradient{
  width: 200px;
  height: 100px;
  background-color: #F7F7F7; /* 默认的背景色 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#9ABCBE', GradientType=1); /* 渐变设置（注意GradientType的值） */
  background: -moz-linear-gradient(left, #F7F7F7 0%, #9ABCBE 100%); /* 火狐浏览器渐变设置 */
  background: -webkit-linear-gradient(left, #F7F7F7 0%, #9ABCBE 100%); /* webkit内核的浏览器渐变设置 */
  background: linear-gradient(to right, #F7F7F7 0%, #9ABCBE 100%); /* 非IE浏览器渐变设置 */
}

简单总结一下，IE浏览器需要使用filter属性来实现背景色渐变，而其他的浏览器可以使用background属性来实现背景色渐变，但为了最大的兼容性，我们可以将多个方式都放在我们的代码中，让浏览器自行选择最适合的方式来解析渲染。