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

这一块css将把一个1像素高的条放在容器的中心。我改变它的宽度以指示加载的进度

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

如何使该元素的左边缘和右边缘“淡入”（因此，放大时，该边缘看起来像此图片中的底线端点）

---

这类似于渐变填充，可能会遇到一些浏览器兼容性问题，因此最好使用像CSS3Pie这样的JavaScript库，并使用jQuery或类似工具设置相应属性的动画

我想从这里开始：

祝你好运