我们能否给border-bottom属性设置渐变颜色？

Question

我们能否在html块级元素的border-bottom属性中添加渐变颜色？

边框应该类似于这个-

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

- TNK

---

@SverriM.Olsen，我在提问之前已经查看了那个问题。但是我没有找到使用border-bottom属性的任何解决方案。 - TNK

也许是因为没有解决方案？如果有解决方案，它早就被发布了。如果那里的答案表明没有解决方案，那么再次发布同样的问题也不会出现一个解决方案。 - BoltClock

Answer 1

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

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

对于旧的浏览器，渐变可以是一张图片，对于年轻的浏览器，它可以是一个渐变。

在border-image中使用的渐变尚未完全得到支持，Firefox似乎仍然不喜欢它。

使用背景和填充就好像有一个边框存在。演示

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 */
}

注意，不需要使用伪元素，您也可以通过这种方式绘制每个边框，甚至使它们动画化。

- G-Cyrillus

---

感谢所有的回答。 - TNK

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

- misterManSam

---

太好了...这就是我要找的。有一个问题，我们能让它在IE中工作吗？ - TNK

你可以使用任何在所需浏览器中起作用的背景 :) 这也取决于浏览器如何处理:after，因此您需要进行测试。 - misterManSam

你忘记了填充(padding)，所以伪元素不会覆盖或者在内容上/下显示。你甚至可以使用background-size和no-repeat来避免使用伪元素：http://codepen.io/anon/pen/CqApt - G-Cyrillus

尝试和错误会找出正确的填充方式，我相信。将背景应用于块元素本身的问题是您无法为该元素应用另一个背景。 - misterManSam

是的，你可以使用http://codepen.io/gc-nomade/pen/tbgiF。重要的是要知道你在做什么以及如何过滤（通过CSS）你的浏览器。如果需要使用伪元素来包含不支持多个背景的浏览器，那么这样做是一个明智的选择 :) - G-Cyrillus

Answer 3

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

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

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

- Rock Rathore

Answer 4

<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

的翻译是：

{{link1：Fiddle演示}}

。

- Amarnath Balasubramanian