<分区>
css - 如何仅在 border-top 上使用 border-image？
标签 css border-image
根据屏幕截图，当线条到达文字部分的中心时变得透明怎么办？我们可以使用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>最佳答案
好吧，这不是我的答案。我只是在问题的评论部分添加@Sachin 给出的解决方案的代码片段。
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>关于css - 如何仅在 border-top 上使用 border-image？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29966687/