如何仅在边框顶部使用边框图像？ [复制]答案

【问题标题】：How to use border-image on border-top only? [duplicate]如何仅在边框顶部使用边框图像？ [复制]
【发布时间】：2015-07-10 02:15:12
【问题描述】：

根据截图，如果线条到达文字部分的中心时变得透明怎么办？我们可以使用css渐变来实现吗？

    h2.section-title {
		font-size: 34px;
		font-weight: 400;
		text-transform: uppercase;
	}
	.section-divider h2 {
		display: inline-block;
		padding: 1rem;
		position: relative;
		top: -5rem;
		background-color: transparent;
	}
	.section-divider {
		border-top: 1px solid #fff;
		
		margin-top: 4rem;
		margin-bottom: 0;
		text-align: center;
	}

<div class="section-divider">
     <h2 class="text-center section-title" lang="en">Highlights</h2>
</div>

【问题讨论】：

类似jsfiddle.net/XWVxk/8 ?
@Sachin 我非常确定，这就是骗子想要的。将其作为单独的答案发布并解释您在其中所做的事情真的很棒。谢谢

标签： css border-image

【解决方案1】：

好吧，这不是我的答案。我只是在问题的评论部分添加@Sachin给出的解决方案的代码sn-p。

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}

<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>

【讨论】：