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

Can we set a gradient color to border-bottom property?

提问by TNK

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

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

Border should be something similar to this -

边界应该是类似的东西 -

Can anybody tell me it is possible in CSS3?

谁能告诉我在 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%);
}

回答by G-Cyrillus

Since answer already given, see this as infos.

由于已经给出答案，请将其视为信息。

You may use background-imageinstead border-imageto draw your gradient at bottom.

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

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

渐变可以是旧浏览器的图像和新浏览器的渐变。

Gradient used in border-image are not yet totally supported , Firefox seems still to dislike it.

边框图像中使用的渐变尚未完全支持，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.

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

回答by misterManSam

Here we are :)

我们到了 ：）

Have a fiddle - Fiddle link!

有一个小提琴 -小提琴链接！

I left only the webkit gradient so this works in Chrome. Change appropriately :)

我只留下了 webkit 渐变，所以这适用于 Chrome。适当改变:)

HTML

HTML

<div>aaa</div>

CSS

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;
}

回答by Rock Rathore

We can use CSS Selectors the :after or :before selector

我们可以使用 CSS 选择器的 :after 或 :before 选择器

HTML

HTML

<section class="seperated">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
<section class="seperated">Donec sapien sapien, suscipit nec accumsan ac, ornare vel enim.</section>
<section class="seperated">Nulla commodo eros nec lacus cursus mattis.</section>

CSS

CSS

section.seperated + section.seperated:before{
content:"";
height:1px;
background:-moz-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
background:-webkit-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
background:linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
width:100%;
display:block;
}

回答by Amarnath Balasubramanian

<div id="c">aaaaaaaa</div>
<div id="id"></div>

#c {
    height:100px;
    border:1px solid black;
}
#id {
    border: 0;
    height: 10px;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
    /* IE6-9 */
}

Fiddle DEmo

小提琴演示