轮廓渐变 - CSS

Question

我需要帮助为轮廓添加渐变效果。由于定位不正确，我无法增加高度。有什么办法吗？我尝试将此代码与渐变类合并，但渐变效果仅适用于1像素高度。有什么建议吗？

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

Thanks, Jan

http://jsfiddle.net/he703uzv/

- spaceholder

---

我们需要更多的代码和 jsfiddle。 - Andrew

https://css-tricks.com/examples/GradientBorder/ - odedta

http://jsfiddle.net/soledar10/qryouad1/ - Dmitriy

你可能会发现为每个边框创建渐变边框很有帮助。 - jbutler483

必须要有大纲。这是 jsfiddle 的链接：http://jsfiddle.net/he703uzv/ - spaceholder

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>

请查看轮廓渐变。

- UI-UX

---

我必须使用outline:;，尝试过边框(border)，但其他如响应式(responsive)、位置(position)等的东西都无法正确工作。 - spaceholder