整个列表的线性渐变与每个单词的线性渐变

Question

我有一个列表作为内联导航，我正在向其添加渐变颜色。现在渐变正在影响每个 link 单独。我希望它能影响从第一个词到最后一个词的列表。代码如下：

CSS:

ul li {
    display: inline;
    list-style-type: none;
    padding: 0 0 0 40px;
}

ul li a {
    position: relative;
    background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

HTML:

<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

jsfiddle

Answer 1

您需要将背景应用到 ul 元素。您可能需要一个 class 或 ID 来将您的导航与其他 ul 区分开来。

整个列表的线性渐变与每个单词的线性渐变

linear gradient to entire list vs just each word

css

linear-gradients