了解如何在 CSS 中使用渐变线突出显示标题

教程：如何在 CSS 中使用渐变线突出显示标题

在本教程中，我们将学习如何仅使用 CSS 用渐变线突出显示标题。 我们将使用一个元素 h1 并在文字下方添加渐变线效果。

第 1 步：创建 HTML 文件

创建具有基本结构和元素的 HTML 文件 h1 我们将对其应用 CSS 样式。

第 2 步：创建 CSS 文件

创建一个命名的 CSS 文件 styles.css 并将其链接到您的 HTML 文件中，如上所示。 然后将以下CSS样式添加到文件中 styles.css ：

h1 {
  text-align: center;
  border: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.6rem;
}

h1:before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 7rem;
  background: linear-gradient(to right, #A02756, #EE345D, #DEE232);
}

CSS 说明

1. 样式为 h1 ：

   • text-align: center; ：文本水平居中。
   • border: none; ：删除默认边框（如果有）。
   • position: relative; ：将元素相对于其正常位置定位，从而允许定位伪元素 ::before 与此元素相关。
   • display: flex; ：使用 Flexbox 使子元素居中。
   • align-items: center; 等 justify-content: center; ：将内容居中 h1 垂直和水平。
   • padding-bottom: 1.6rem; ：在底部添加一个空格 h1 使渐变线不与文本重叠。

2. 样式为 h1:before ：

   • content: ""; : 创建一个伪元素 ::before 見解。
   • position: absolute; ：允许您相对于父元素定位伪元素（h1）。
   • bottom: 0; ：将伪元素放置在底部 h1。
   • height: 2px; ：定义渐变线的高度。
   • width: 7rem; ：定义渐变线的宽度。
   • background: linear-gradient(to right, #A02756, #EE345D, #DEE232); ：使用指定颜色从左到右应用渐变。

第三步：定制

您可以根据需要调整样式：

• 更改属性中的渐变颜色 background。
• 更改宽度（width）和高度（height）的退化线。
• 调整一下 padding-bottom 的 h1 控制文本和行之间的间距。

最后结果

通过执行这些步骤，您将拥有一个居中的标题，下方有一条渐变线，创造出时尚的高光效果。

在codepen上查看结果

就这样吧！ 现在您有了一个带有渐变线的突出显示标题。