当前位置：首页 > news >正文

巧用 CSS linear-gradient 实现多种下划线文字特效（纯 CSS 无需额外标签）

news 2025/10/26 9:44:48

在日常网页设计中，给文字加下划线是常见的样式需求。
很多人第一时间想到 text-decoration: underline，但这个属性的自定义空间有限，想要实现渐变线、虚线、斜线下划线等更有设计感的效果，就需要一点小技巧——使用 background 与 linear-gradient()！

✨ 一、基础下划线实现

下面这段代码展示了如何使用 linear-gradient 模拟传统的下划线：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>body {font: 250%/1.6 Baskerville, Palatino, serif;}a {background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.02em;text-shadow: .05em 0 white, -.05em 0 white;}</style>
</head>
<body><p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p>
</body>
</html>

🔍 效果说明：

background: linear-gradient(gray, gray) → 定义一条灰色的线；
background-size: 100% 1px → 控制线的高度为 1px；
background-position: 0 1.02em → 将线定位到文字的下方；
text-shadow → 避免文字与下划线重叠时影响阅读。

这段代码能在不使用 border-bottom 的情况下实现干净利落的下划线，并且不会破坏文字间距。

🧩 二、使用虚线样式的下划线

通过调整背景图的重复方式和透明间隔，我们可以轻松得到虚线效果👇

p:nth-child(2) a {background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;background-size: .2em 2px;background-position: 0 1em;
}

💡 原理解析：

使用 linear-gradient(90deg, gray 66%, transparent 0) 让每一小段线条中只有 66% 是灰色；
通过 background-repeat: repeat-x 和 background-size 让虚线连续平铺；
效果类似 border-bottom: 1px dashed gray，但更灵活、支持渐变和动画。

🔗 效果展示：

这一句文字中每个 <a> 链接都会带有精致的灰色虚线下划线。

💥 三、斜线下划线（高级视觉特效）

下面是第二段代码的实现，它使用两个对角线方向的 linear-gradient 叠加，打造红色斜纹下划线：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>body {font: 250%/1.6 Baskerville, Palatino, serif;}a {background: linear-gradient(-45deg, transparent 40%, red 0, red 60%, transparent 0) 0 1em,linear-gradient(45deg, transparent 40%, red 0, red 60%, transparent 0) .1em 1em;background-repeat: repeat-x;background-size: .2em .1em;text-shadow: .05em 0 white, -.05em 0 white;}</style>
</head>
<body><p>“The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”</p>
</body>
</html>

🎨 原理解析：

使用两条倾斜的渐变：
- 第一条 -45deg 方向；
- 第二条 45deg 方向；
它们组合形成一个 “X” 形的斜线下划线；
通过 repeat-x 实现横向连续平铺；
background-size 控制线条密度，.2em .1em 可以根据字体大小微调。

📸 视觉效果：

每个链接文字下方都会有一条红色斜纹线，看起来像织物纹理，非常有设计感。

🧠 四、拓展思路：让下划线更“聪明”

你可以继续利用同样的 linear-gradient 思路，做出以下效果：

渐变色下划线（linear-gradient(to right, red, blue)）；
波浪线下划线（结合 repeating-linear-gradient）；
动态动画下划线（用 background-position 做滑动特效）。

例如👇

a:hover {background: linear-gradient(to right, #ff0080, #ff8c00) no-repeat;background-size: 100% 3px;background-position: 0 1.05em;transition: background-size 0.3s ease;
}

🏁 五、总结

类型	实现方式	优点
普通下划线	`linear-gradient(gray, gray)`	可控颜色与位置
虚线下划线	`linear-gradient(90deg, gray 66%, transparent 0)`	轻量无 border
斜线下划线	两个倾斜的 gradient 叠加	独特视觉效果
动态渐变线	`to right` + `transition`	适合 hover 动效