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

我们可以为html块元素的

边框底部
属性添加渐变色吗

边界应与此类似-


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

我们到了：）

拉小提琴-

我只留下了webkit渐变，所以它在Chrome中工作。适当更改：）

HTML

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

HTML

aaaaaa
#c{
高度：100px；
边框：1px纯黑；
}
#身份证{
边界：0；
高度：10px；
背景图像：-webkit线性渐变（左侧，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
背景图像：-moz线性梯度（左，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
背景图像：-ms线性渐变（左侧，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
背景图像：-o线性梯度（左，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#000000'，GradientType=1）；
/*IE6-9*/
}

既然已经给出了答案，请将此作为信息

您可以使用
背景图像
代替
边框图像
在底部绘制渐变

渐变可以是较老浏览器的图像，也可以是较年轻浏览器的渐变

边界图像中使用的渐变还没有完全得到支持，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 */
}

注意，不需要伪元素，您也可以这样绘制每个边框，甚至
@SverriM.Olsen，我在提问之前检查了这个问题。但我找不到任何边界底部属性的解决方案。可能是因为没有？如果有一个解决方案，它会被张贴在那里。如果那里的答案表明没有解决方案，那么再次发布相同的问题不会让问题出现。太好了。。。这就是我要找的。有一个问题，我们可以让它在IE中也工作吗？你可以在所需的浏览器中使用任何可用作背景的东西：）还取决于浏览器如何处理
：在
之后，所以你必须测试它。你错过了填充，所以pseudo不会覆盖/覆盖内容。您甚至可以使用背景大小避免使用伪元素，并且无需重复：我相信，反复试验将得到正确的填充。将背景应用于块元素本身的问题是，不能为该元素应用其他背景。是的，可以。重要的是要知道你在做什么，以及如何过滤（通过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;
}

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

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

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

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