教程:如何在 CSS 中使用渐变线突出显示标题
在本教程中,我们将学习如何仅使用 CSS 用渐变线突出显示标题。 我们将使用一个元素 h1
并在文字下方添加渐变线效果。
第 1 步:创建 HTML 文件
创建具有基本结构和元素的 HTML 文件 h1
我们将对其应用 CSS 样式。
Titre avec Surlignage Dégradé
第 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 说明
-
样式为
h1
:text-align: center;
:文本水平居中。border: none;
:删除默认边框(如果有)。position: relative;
:将元素相对于其正常位置定位,从而允许定位伪元素::before
与此元素相关。display: flex;
:使用 Flexbox 使子元素居中。align-items: center;
等justify-content: center;
:将内容居中h1
垂直和水平。padding-bottom: 1.6rem;
:在底部添加一个空格h1
使渐变线不与文本重叠。
-
样式为
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
控制文本和行之间的间距。
最后结果
通过执行这些步骤,您将拥有一个居中的标题,下方有一条渐变线,创造出时尚的高光效果。
就这样吧! 现在您有了一个带有渐变线的突出显示标题。