具有线性渐变的边界顶部？ [复制]

Question

我希望我只有顶部边框但具有渐变色。像这样的

#grad1 {
    height: 200px;

    border-top:205px red; /* For browsers that do not support gradients */
    border-top:205px -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
     border-top:205px -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
     border-top:205px -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
     border-top:205px linear-gradient(red, yellow); /* Standard syntax (must be last) */
}

这可能吗？如果可以，我该怎么做？

Answer 1

CSS Tricks 有一篇关于渐变边框的精彩文章：

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

至于只显示在边框顶部，您需要确保边框的所有其他边都设置为 0。

-webkit-border-image: 
  -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
  -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
  -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
-o-border-image:
  -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
border-image:
  linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;

border-bottom: 0;
border-right: 0;
border-left: 0;