我们可以为 border-bottom 属性设置渐变颜色吗? [英] Can we set a gradient color to border-bottom property?

问题描述

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

Can we add a gradient color to border-bottom property of a html block elements?

边框应该类似于这个 -

Border should be something similar to this -

谁能告诉我在 CSS3 中是可能的吗?

Can anybody tell me it is possible in CSS3?

我像这样尝试过，但无法让它工作.

I tried it like this, but couldn't get it to work.

.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%);
}

推荐答案

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

Since answer already given, see this as infos.

您可以使用 background-image 代替 border-image 在底部绘制渐变.

You may use background-image instead border-image to draw your gradient at bottom.

渐变可以是旧版浏览器的图像，也可以是新版浏览器的渐变.

Gradient can be an image for older browser and a gradient for younger browsers.

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

使用背景 + 内边距就好像有边框一样.演示

The use of a background + a padding will do as if a border stands there. 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 */
}

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

NOTICE, that there is no need of a pseudo element, you can as well draw every borders this way and even animate them.

这篇关于我们可以为 border-bottom 属性设置渐变颜色吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！