渐变边框导致边框消失答案

【问题标题】：Gradient Border Causing the Border to Disappear渐变边框导致边框消失
【发布时间】：2014-12-31 04:47:45
【问题描述】：

我的页面上有几个标题（h3 标签），标题右侧有一个双边框。我希望那些边界消失。我以为我可以在边框上使用渐变来做到这一点，但它不起作用。

为了更好地理解，看一下双边框的this jsFiddle。我希望这两条线在向右移动时淡出。

这是我用来创建这两行的代码：

HTML

<div class="title">
    <h3>Title</h3>
    <div class="title-container">
        <div class="title-separator"></div>
    </div>
</div>

CSS

.title h3{
    display: table-cell;
    white-space: pre;
    padding-right:7px;
}
.title-container {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    height: 6px;
    width: 100%;
}
.title-separator {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: 6px;
    display: block;
    width: 100%;
    box-sizing: content-box;
    position: relative;
    border-color:#222;
    border-style:solid;
    border-left:0;
    border-right:0;
}

我尝试做的是通过将以下代码添加到.title-separator CSS 来使用border-image：

border-image: linear-gradient(to right, rgba(25,50,39,1) 0%,rgba(17,34,27,0) 100%);

（我省略了这篇文章的供应商前缀。）

当我这样做时，边框消失了。 Here is a fiddle 带有渐变代码。

关于如何使双边框淡出的任何想法？我可以根据需要更改 HTML 和/或 CSS。

【问题讨论】：

标签： css border gradient

【解决方案1】：

您可以通过将linear-gradients 应用于:after 和:before :pseudo-elements 来做到这一点。

.title h3 {
  display: table-cell;
  white-space: pre;
  padding-right: 7px;
}
.title-container {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  height: 6px;
  width: 100%;
}
.title-container:after, .title-container:before {
  position: absolute;
  content: '';
  left: 0;
  top: calc(50% + 3px);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0));
}
.title-container:before {
  top: calc(50% - 2px);
}

<div class="title">
  <h3>Title</h3>
  <div class="title-container"></div>
</div>

【讨论】：

很好的解决方案。谢谢！
@Lynda - 不客气。 :)

【解决方案2】：

您可以将此属性用作

    border-image: linear-gradient(to right, rgba(25,50,39,1) 0%,rgba(17,34,27,0) 100%) 100% 100;

对你有帮助

【讨论】：