如何在标题的下划线中添加线性渐变颜色？答案

【问题标题】：How can I add a linear-gradient colour to my underline for my heading?如何在标题的下划线中添加线性渐变颜色？
【发布时间】：2018-08-05 05:25:00
【问题描述】：

我已经在我正在构建的网站标题的一部分下划线，并且可以正常着色，但是在向其添加线性渐变颜色时我正在努力。

我已将标题部分放入一个跨度并为border-bottom 着色，这似乎可行，但是边框太低而不能成为下划线。

编码是这样的：

span {
    border-bottom: 5px solid transparent;
    border-image: linear-gradient(to right, #7228fe 0%, #4ea2f5 100%);
    border-image-slice: 1;
    float: center;
    margin-bottom: -5px;
    line-height: 20px;
    padding-bottom: 0px;
}

【问题讨论】：

你可以使用伪元素来做到这一点
float: center; 无效......为什么不向我们展示您想要获得的最终结果

标签： html css border gradient underline

【解决方案1】：

我建议您将标题放在 div 中，并使用 CSS 定位 div。

.box {
	border-bottom: 5px solid transparent;
	border-image: linear-gradient(to right, #7228fe  0%,#7228fe  60%, #4ea2f5 61%, #4ea2f5 100%);
	border-image-slice: 1;
}

<html>
<body>
  <div class="box">
    <h1>box</h1>
  </div>
</body>
</html>

https://codepen.io/visheshthakur/pen/XZxWwy

【讨论】：