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

这类似于渐变填充，并且会受到一些浏览器兼容性问题的影响，因此最好使用 JavaScript 库(如 CSS3Pie)，并使用 jQuery 或类似的东西为适当的属性设置动画。

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

祝你好运!