快速 CSS 技巧：制作渐变文字描边。渐变文字描边视频教程，让我们开始吧，你可能会觉得有用的文章

2025-06-07

快速 CSS 技巧：制作渐变文本描边。

渐变文字描边

视频教程

让我们开始吧

您可能觉得有用的文章

大家好，欢迎！今天我们来学习一个 CSS 快速技巧。

渐变文字描边

想知道如何制作渐变文字描边吗？让我们看看如何轻松制作一个。

视频教程

如果您愿意，您可以在 YouTube 上观看快速教程视频。

让我们开始吧

首先，我们需要一段文本。编写完基本的 HTML 结构后，h1在 body 中创建一个元素，或者您可以创建任何文本元素。



<h1 class="text">gradient</h1>
Enter fullscreen mode Exit fullscreen mode

现在添加基本样式。



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'roboto', sans-serif;
    background-color: #eee;
}
Enter fullscreen mode Exit fullscreen mode
输出

捕获-2

可以看到，我们将 Text 元素居中了。对吧？现在，设置文本样式。



.text{
    font-size: 150px;
    color: #eee;
    text-transform: capitalize;
}
Enter fullscreen mode Exit fullscreen mode
输出

捕获-3

请注意，这里的背景颜色和文本颜色相同。

现在，为文本添加一些渐变背景。



.text{
    /*previous styles*/
    background: linear-gradient(-45deg, #eeaa52, #e73c6f, #2394d5, #2af3b7);
    background-size: 200% 200%;
}
Enter fullscreen mode Exit fullscreen mode
输出

捕获-4

但是，我们不想要背景颜色，对吗？因此请使用此属性。



.text{
    /*previous styles*/
    -webkit-background-clip: text;
}
Enter fullscreen mode Exit fullscreen mode

这个属性是干什么用的？它只会在文本中显示背景颜色。意思是这样的。
捕获-5

但这只有在文本颜色设置为透明的情况下才有效。而在我们的例子中，文本颜色不透明，因此我们看不到任何渐变颜色。希望这说得通。

现在最后一步，使用-webkit-text-stroke属性。



.text{
    /*previous styles*/
    -webkit-text-stroke: 8px transparent;
}
Enter fullscreen mode Exit fullscreen mode

在这里，您可以在 8px（描边宽度）之后给出任何描边颜色，但是通过给出透明，您可以在文本内留出空间，因此我们的背景渐变应该是可见的。

输出

捕获-6

好了，完成了。希望你理解了所有内容。如果你有疑问或者我遗漏了什么，请在评论区告诉我。

您可能觉得有用的文章

  1. CSS 位置
  2. CSS媒体查询
  3. CSS 弹性框

如果你喜欢，可以订阅我的 YouTube 频道，并在 Instagram 上关注我。我创作了精彩的网络内容。[订阅]，[ Instagram ]

感谢您的阅读。

文章来源：https://dev.to/themodernweb/quick-css-trick-make-gradient-text-中风-1ila
Devto 翻译
PREV
平铺导航 - 如何在 2021 年使用 HTML CSS 和 JS 制作网页导航栏视频教程代码文章您可能会觉得有用
NEXT
How to download HTML element as a image. Visiting card designer Video Tutorial Code Articles you may find Useful