css - 带线性渐变的虚线边框

Question

我有一个带有颜色代码 #664914 的虚线边框。我想让这个边框在最后以黑色渐变淡化。当前的css如下：

#div1{width:1000px;border-bottom:1px dotted #664914; margin: 5px auto 0;}

尝试实现的目标是否可以通过 css 实现？如果是这样，我怎么能做到这一点。我知道我的问题可能很明显，但很难弄清楚。

Answer 1

你可以用border-image，这里有一组很好的例子：

http://css-tricks.com/examples/GradientBorder/

基本思想：

.top-to-bottom {
    border-width:3px;
    -webkit-border-image: 
        -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
        -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
        -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
       -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
}

请记住，IE 不支持此功能 - http://caniuse.com/#search=border-image