Question

我的页面上有一些标题（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;
}

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

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

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

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

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

Answer 1

您可以将linear-gradients应用于:after和:before：伪元素来实现此目的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将此属性用作

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

可能对你有所帮助

边界导致边界消失的渐变边界

2 个答案: