Question

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

我已经将标题的一部分放入一个范围并对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;
}

Answer 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

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

1 个答案: