我们可以将渐变颜色设置为border-bottom属性吗？

Question

我们可以为border-bottomhtml块元素的属性添加渐变颜色吗？

边界应该类似于此 -

任何人都可以告诉我在CSS3中有可能吗？

我试过这样,但无法让它发挥作用.

.border-gradient { 
   border-bottom: 8px solid;
   -moz-border-image: -moz-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
   -webkit-border-image:  -webkit-gradient(left top, right top, color-stop(0%, rgba(92,7,52,1)), color-stop(12%, rgba(134,29,84,1)), color-stop(47%, rgba(255,93,177,1)), color-stop(100%, rgba(83,0,30,1)));
   -webkit-border-image:  -webkit-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
   -o-border-image: -o-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%); border-image: linear-gradient(to right, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
}

Answer 1

既然答案已经给出,请将此视为信息.

您可以使用background-image,而不是border-image在底部绘制你的梯度.

渐变可以是较旧浏览器的图像,也可以是较年轻浏览器的渐变.

在边框图像中使用的渐变尚未完全支持,Firefox似乎仍然不喜欢它.

使用背景+填充就像边框站在那里一样.DEMO

div {
  text-align:center;
  padding-bottom:5px;
  background: /* gradient can be an image */
    linear-gradient(
      to left, 
      rgba(92,7,52,1) 0%,
      rgba(134,29,84,1) 12%,
      rgba(255,93,177,1) 47%,
      rgba(83,0,30,1) 100%
    )
    left 
    bottom
    #777    
    no-repeat; 
  background-size:100% 5px ;/* if linear-gradient, we need to resize it */
}

注意,不需要伪元素,你也可以用这种方式绘制每个边界,甚至为它们制作动画.

Answer 2

我们到了 ：）

小提琴- 小提琴链接！

我只留下了webkit渐变，因此可以在Chrome浏览器中使用。适当更改：）

的HTML

<div>aaa</div>

的CSS

div {
    display: block;
    height: 200px;
    width: 500px;
    border: solid 1px #CCC;
    border-bottom: none;
    position: relative;
}
div:after {
    content:"";
    background: -webkit-linear-gradient(left, rgba(92, 7, 52, 1) 0%, rgba(134, 29, 84, 1) 12%, rgba(255, 93, 177, 1) 47%, rgba(83, 0, 30, 1) 100%);
    display: block;
    height:10px;
    width: 500px;
    position: absolute;
    bottom: 0;
}