用CSS淡出边框

我的页脚有一个虚线的顶部边框,如下所示：

footer 
{
    border-top:1px dashed #ddd;
    color:#999;
}

我想知道我怎么能让虚线从左到右淡出.谢谢！

可能有一个更简单的解决方案,但一个是将一个从左到右渐变的渐变覆盖边界,例如

footer:before {
    content: "";
    background-color: black;
    height: 1px;
    display: block;
    top: -1px;
    position: relative;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

http://jsfiddle.net/tcs6J/1/