css - 如何使线条的边缘淡出？

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

祝你好运！