英语 |
翻译 | 网络后端开发
让一个网站脱颖而出是很困难的。 为此，这里有一个可以改进任何着陆页或标题的小技巧：使用渐变文本。
只要确保不要过度使用它即可。 渐变文本不应该用在较长的文本中。 但是，它可以用在标题或特定的突出文本中。 容易吸引用户的注意力。
你可能会松一口气，你很难直接给文字颜色设置渐变，特别是如果你有使用设计工具的经验，可能会更好，如果没有，你可以学习明天的内容，使用 CSS 来实现这一点影响。
例如，颜色：线性渐变（黄色，红色）将难以正常工作。
然而，渐变文本可以在CSS中实现，只需要一些额外的步骤。
最好从一些粗体文本开始。 这将使渐变突出并使文本更具可读性。
我将使用的文本是使用具有以下值的字体缩写样式设置的：
font: bold 120px Poppins, sans-serif;第 1 步：添加渐变
首先，我们需要添加渐变作为背景。
默认情况下，渐变将从上到下字体渐变 css3，但我们也可以指定方向。
如果你想要水平渐变，向右就可以了，稍微倾斜60度看起来更自然。
代码如下所示：
.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);}
如果您想学习如何创建所需的任何渐变，并且对 CSS 渐变不太了解，则只需准备考试即可。
第 2 步：剪辑
现在我们需要使渐变仅显示文本所在的位置。 我们可以使用background-clip属性来实现这一点。
您可能已经知道，使用此属性，我们可以将背景剪切到元素的边框、填充或内容框。
它还可以将背景剪切到文本上。
.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);background-clip: text;}
如果您尝试这段代码，渐变看起来就会消失。 这是因为渐变位于文本下方。
第三步：显示
为了显示文本下方的渐变，我们需要使文本透明。 我们可以通过设置 color:transparent 来做到这一点。
.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);background-clip: text;color: transparent;}
您可能在这里使用背景速记，但不要。
不幸的是，background 的简写版本background-clip 不支持text 关键字。
如果您必须支持 Internet Explorer，则需要转回黑色。
包装我们之前编译的所有@supports。 这样，它只能在现代浏览器中呈现。
之后，在 @supports 块之外，为文本设置后备颜色。 它可能是应该出现在渐变中的颜色，但与设计的其余部分配合得很好。
/* fallback for IE */.gradient-text {color: red;}/* gradient text for modern browsers */@supports (background-clip: text) {.gradient-text {background-image: linear-gradient(60deg, #E21143, #FFB03A);background-clip: text;color: transparent;}}
注意：虽然@supports规则本身在IE中不受支持字体渐变 css3，但它仍然会忽略以上所有内容。
