轮廓渐变 - CSS

Question

我需要帮助添加渐变到轮廓。我不能提高身高，因为定位不会正常工作。有什么办法吗？我尝试将此代码与渐变类合并，但渐变仅适用于1px高度。有什么建议吗？

    height: 1px !important;
    background: #D3D3D3;    
    position: absolute;
    right: 0px;
    width: 50%;
    top: 50%;
    outline: 3px solid #D3D3D3;  

谢谢， 扬

http://jsfiddle.net/he703uzv/

Answer 1

.outline-border { 
    width: 400px;
    padding: 20px;
    border-top: 10px solid #47c465;
    border-bottom:10px solid #00deff;
    background-image: 
        linear-gradient(#47c465, #00deff),
        linear-gradient(#47c465, #00deff)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}

<div class="outline-border">Hello World!</div>

参见Outline Gradient。