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

带有线性渐变的虚线边框

1 个答案: