css - 使用 CSS 淡出边框

Question

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

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

我想知道如何使虚线从左到右淡出。谢谢！

Answer 1

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

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/

Answer 2

您可以使用 CSS Gradients 创建它。在这里检查。

为了使其尽可能简单，首先创建两个 div：

<div id="borderbox">
    <div id="box">
    </div>
</div>

我们将使用外框并给它一个渐变背景，然后给内部 div 一个白色背景，从而伪造边框。

#borderbox {
    background-color: #eee; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(to right, #000, #fff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(to right, #000, #fff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(to right, #000, #fff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(to right, #000, #fff); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to right, #000, #fff); /* Standard syntax; must be last */    
    width: 500px;
    height: 200px;
    display: block;
    padding: 1px 0 0 0;
    opacity: 0.5;
    border-top: 1px dashed #ccc;
}
#box { background: #fff; width: 500px; height: 200px;  margin-top: -1px; }

演示：http: //jsfiddle.net/XwJEB/1