我正在尝试制作一条灰线，它会逐渐变透明。我创建了一个1x100px的div，并添加了css渐变来制作淡入淡出的效果。
它工作正常，除了在 IE 中 div 有一个蓝色边框，我无法摆脱它。
这是我的div的css
#left_header_border {
position:absolute;
bottom:-1px;
left:-100px;
width:100px;
height:1px;
/* gradient */
background-color: transparent;
background-image: -moz-linear-gradient(left, transparent, #cccccc); /* FF3.6 */
background-image: -o-linear-gradient(left, transparent, #cccccc); /* Opera 11.10+ */
background-image: -webkit-gradient(linear,left bottom,right bottom,color-stop(0, transparent),color-stop(1, #cccccc)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(left,transparent, #cccccc); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(left, transparent, #cccccc);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='transparent', EndColorStr='#cccccc'); /* IE6–IE9 */
}
我已尝试检查 div，并将其调高，渐变似乎有效，但颜色为蓝色，并添加了边框。为什么？
最佳答案
将过滤器更改为:
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='#00cccccc', EndColorStr='#ffcccccc'); /* IE6–IE9 */
过滤器不允许“透明”作为颜色值，但它允许您 use an 8-digit hex reference ，其中前两位数字指定颜色的不透明度(就像 rgba() 颜色引用中的最后一个值一样)。
More on using RGBA and transparency & using MS Filters
如果你对可怕的数学有兴趣，你可以找到例如0.6 透明度 在 Windows 计算器中，在科学 View 中打开它，执行 255*0.6 = 153 然后单击转换的“十六进制”复选框 = 99
在上面的示例中，它从完全透明(0.0 不透明度)= 255*0 = 十六进制值“00”开始到完全不透明(1.0 不透明度)= 255*1 = 十六进制值“ff”
更新 正如 thirtydot 在评论中友情链接的那样，这里有一个方便的 converter from RGBa to MS Filter syntax
关于css - IE在使用css渐变的div中添加蓝色边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5497519/