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