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