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;

border-top与线性渐变？

1 个答案: