如何使一条线的边缘淡出？

Question

这个css位将在其容器中居中一个1像素高的条。我改变它的宽度来表示加载的进度。

#centered_bar {
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 100px;
    height: 1px;
    position: relative;
    background-color: #FFFFFF;
}

我如何使这个元素的左右边缘'淡化'（因此，当放大时，边缘看起来像这张图片中的底线）？

Answer 1

这类似于渐变填充，会遇到一些浏览器兼容性问题，因此最好的方法是使用CSS3Pie之类的JavaScript库，并使用jQuery或类似的东西为相应的属性设置动画。

我会从这里开始：http://css3pie.com/documentation/supported-css3-features/#gradients

祝你好运！